用js+css模拟九宫格精灵版本二_css sprite九宫格-CSDN博客

本文链接：https://blog.csdn.net/cong_wa/article/details/52484950
__setScale9Sprite_ :function(data)
	{
		var _this = this;
		if(data.wraperId != _this.m_id) {
			return;
		}
		//九宫格的信息
		var info = _this._scale9SpriteInfo = _this._scale9SpriteInfo || {
			url: null,
			imgArray: [],
			imgW: 0,
			imgH: 0,
			sizeW: 0,
			sizeH: 0,
			rectX: 0,
			rectY: 0,
			rectW: 0,
			rectH: 0,

			calculate: function(){
				var info = _this._scale9SpriteInfo;

				if(!info || !info.url || info.url=='' ||info.imgArray.length!=9){
					return;
				}
				var centerW = info.sizeW - (info.imgW - info.rectW);
				var centerH = info.sizeH - (info.imgH - info.rectH);
				//中
				var scaleX = centerW / info.rectW;
				var scaleY = centerH / info.rectH;
				var width = info.imgW * scaleX;
				var height = info.imgH * scaleY;
				info.imgArray[0].style.width = width + 'px';
				info.imgArray[0].style.height = height + 'px';
				info.imgArray[0].style.top = - (info.sizeH/2-info.rectY+info.rectY*scaleY) + 'px';
				info.imgArray[0].style.left = - (info.sizeW/2-info.rectX+info.rectX*scaleX) + 'px';
				var rect = {top: 0, right: 0, buttom: 0, left: 0};
				rect.top = info.rectY * scaleY;
				rect.left = info.rectX * scaleX;
				rect.right = centerW + rect.left;
				rect.buttom = centerH + rect.top;
				info.imgArray[0].style.clip = 'rect(' + rect.top + 'px,' + rect.right + 'px,' + rect.buttom + 'px,' + rect.left + 'px)';
				//上
				info.imgArray[1].style.width = width + 'px';
				info.imgArray[1].style.height = info.imgH + 'px';
				info.imgArray[1].style.top = - info.sizeH / 2 + 'px';
				info.imgArray[1].style.left = - (info.sizeW/2-info.rectX+info.rectX*scaleX) + 'px';
				var rectUp = {top: 0, right: 0, buttom: 0, left: 0};
				rectUp.left = info.rectX * scaleX;
				rectUp.right = centerW + rectUp.left;
				rectUp.buttom = info.rectY;
				info.imgArray[1].style.clip = 'rect(' + rectUp.top + 'px,' + rectUp.right + 'px,' + rectUp.buttom + 'px,' + rectUp.left + 'px)';
				//下
				info.imgArray[2].style.width = width + 'px';
				info.imgArray[2].style.height = info.imgH + 'px';
				info.imgArray[2].style.top = info.sizeH / 2 - info.imgH + 'px';
				info.imgArray[2].style.left = - (info.sizeW/2-info.rectX+info.rectX*scaleX) + 'px';
				var rectDowm = {top: 0, right: 0, buttom: 0, left: 0};
				rectDowm.top = info.rectY + info.rectH;
				rectDowm.left = info.rectX * scaleX;
				rectDowm.right = centerW + rectDowm.left;
				rectDowm.buttom = info.imgH;
				info.imgArray[2].style.clip = 'rect(' + rectDowm.top + 'px,' + rectDowm.right + 'px,' + rectDowm.buttom + 'px,' + rectDowm.left + 'px)';
				//左
				info.imgArray[3].style.width = info.imgW + 'px';
				info.imgArray[3].style.height = height + 'px';
				info.imgArray[3].style.top = - (info.sizeH/2-info.rectY+info.rectY*scaleY) + 'px';
				info.imgArray[3].style.left = - info.sizeW / 2 + 'px';
				var rectLeft = {top: 0, right: 0, buttom: 0, left: 0};
				rectLeft.top = info.rectY * scaleY;
				rectLeft.right = info.rectX;
				rectLeft.buttom = centerH + rectLeft.top;
				info.imgArray[3].style.clip = 'rect(' + rectLeft.top + 'px,' + rectLeft.right + 'px,' + rectLeft.buttom + 'px,' + rectLeft.left + 'px)';
				//右
				info.imgArray[4].style.width = info.imgW + 'px';
				info.imgArray[4].style.height = height + 'px';
				info.imgArray[4].style.top = - (info.sizeH/2-info.rectY+info.rectY*scaleY) + 'px';
				info.imgArray[4].style.left = info.sizeW / 2 - info.imgW+ 'px';
				var rectRight = {top: 0, right: 0, buttom: 0, left: 0};
				rectRight.top = info.rectY * scaleY;
				rectRight.left = info.rectX + info.rectW;
				rectRight.right = info.imgW;
				rectRight.buttom = centerH + rectLeft.top;
				info.imgArray[4].style.clip = 'rect(' + rectRight.top + 'px,' + rectRight.right + 'px,' + rectRight.buttom + 'px,' + rectRight.left + 'px)';
				//左上
				info.imgArray[5].style.top = - info.sizeH / 2 + 'px';
				info.imgArray[5].style.left = - info.sizeW / 2 + 'px';
				var rect = {top: 0, right: 0, buttom: 0, left: 0};
				rect.right = info.rectX;
				rect.buttom = info.rectY;
				info.imgArray[5].style.clip = 'rect(' + rect.top + 'px,' + rect.right + 'px,' + rect.buttom + 'px,' + rect.left + 'px)';
				//右上
				info.imgArray[6].style.top = - info.sizeH / 2 + 'px';
				info.imgArray[6].style.left = info.sizeW / 2 - info.imgW + 'px';
				var rect = {top: 0, right: 0, buttom: 0, left: 0};
				rect.right = info.imgW;
				rect.buttom = info.rectY;
				rect.left = info.rectX + info.rectW;
				info.imgArray[6].style.clip = 'rect(' + rect.top + 'px,' + rect.right + 'px,' + rect.buttom + 'px,' + rect.left + 'px)';
				//左下
				info.imgArray[7].style.top = info.sizeH / 2 -info.imgH + 'px';
				info.imgArray[7].style.left = - info.sizeW / 2 + 'px';
				var rect = {top: 0, right: 0, buttom: 0, left: 0};
				rect.top = info.rectH + info.rectY;
				rect.right = info.rectX;
				rect.buttom = info.imgH;
				info.imgArray[7].style.clip = 'rect(' + rect.top + 'px,' + rect.right + 'px,' + rect.buttom + 'px,' + rect.left + 'px)';
				//右下
				info.imgArray[8].style.top = info.sizeH / 2 -info.imgW + 'px';
				info.imgArray[8].style.left = info.sizeW / 2 - info.imgH + 'px';
				var rect = {top: 0, right: 0, buttom: 0, left: 0};
				rect.top = info.rectH + info.rectY;
				rect.right = info.imgW;
				rect.buttom = info.imgH;
				rect.left = info.rectW + info.rectX;
				info.imgArray[8].style.clip = 'rect(' + rect.top + 'px,' + rect.right + 'px,' + rect.buttom + 'px,' + rect.left + 'px)';
			}
		};

		//最外层的div
		var scale9Sprite = _this.m_viewElement.querySelector('#scale9Sprite');
		if(!scale9Sprite) {
			scale9Sprite = document.createElement('div');
			scale9Sprite.id = 'scale9Sprite';
			scale9Sprite.style.position = 'absolute';
			_this.m_viewElement.appendChild(scale9Sprite);
		}
		if (data.key) {
			switch(data.key){
				case 'file':
						var resInfo = gameEditor.getProject().getFileInfoByID(data.resId);
						if(resInfo) {
							info.url = global.TAG_BASE_URL_RES_HOST + resInfo.resURL.substr(1);
							info.imgArray = [];
							info.imgW = resInfo.width;
							info.imgH = resInfo.height;
							info.sizeW = info.sizeW || info.imgW;
							info.sizeH = info.sizeH || info.imgH;
							info.rectX = info.rectX || info.imgW / 3;
							info.rectY = info.rectY || info.imgH / 3;
							info.rectW = info.rectW || info.imgW / 3;
							info.rectH = info.rectH || info.imgH / 3;

							for (var i = 0; i < 9 ; i++) {
								var imgSprite = '#img'+i;
								var img = scale9Sprite.querySelector(imgSprite);
								if (!img) {
									var img = document.createElement("img");
									img.id = 'img'+ i;
									img.style.position = 'absolute';
									scale9Sprite.appendChild(img);
								};
								img.setAttribute('src', info.url);
								info.imgArray[i] = img;
							};

							info.calculate();
						}
				break;
				case 'scaleAreaX':
					info.rectX = Number(data.value);
					info.calculate();
				break;
				case 'scaleAreaY':
					info.rectY = Number(data.value);
					info.calculate();
				break;
				case 'scaleAreaW':
					info.rectW = Number(data.value);
					info.calculate();
				break;
				case 'scaleAreaH':
					info.rectH = Number(data.value);
					info.calculate();
				break;
				case 'scale9SpriteW':
					info.sizeW = Number(data.value);
					info.calculate();
				break;
				case 'scale9SpriteH':
					info.sizeH = Number(data.value);
					info.calculate();
				break;
				case 'delete':
						_this._scale9SpriteInfo = null;
						var img = _this.m_viewElement.querySelector('#scale9Sprite');
						if(img) {
							_this.m_viewElement.removeChild(img);
						}
						eventCenter.raise('NOTIFY_OBJECT_SIZE_CHANGED');
				break;
			}
		};

		eventCenter.raise('NOTIFY_OBJECT_SIZE_CHANGED');
	},