Vue .9背景图片

Vue .9背景图片

第一次写文章，大佬们轻喷。最近在学TS，想找个东西练练手,之前做项目数据可视化页面时，各图表一般会有一个比较炫酷的边框，但是图表尺寸又不一致，之前的做法是用svg绘制，然后根据div宽高动态计算边框宽高。但是这样UI每次给一个边框，都得重新写一遍，挺麻烦。想起之前做Android开发时的.9图片和web端css3样式中border-image-slice属性，于是用TS写了一个拉伸不失真的vue边框通用插件。代码已上传，欢迎各位大佬Star与指正。

Demo下载地址

效果图

安装插件

npm i vue-dot9

基本使用

import Vue from 'vue';
import dot9 from 'vue-dot9';

Vue.use(dot9);

<!-- 指令v-dot9 -->
<div class="box3" v-dot9='option'></div>

data() {
    return {
        option: {
            source:require('../assets/border.png',
            resizable: false,
            sliceHorizontal: [24, 48],
            sliceVertical: [24, 48]
        }
    }
}

参数说明

参数	说明	类型	是否必须
source	图片地址,如果是src里面的图片,需要使用require引入,已实现响应式	string	是
resizable	是否可缩放,当设置成flase之后改变元素大小背景图片不会跟着变化	boolean	否
sliceHorizontal	水平方向上需要被拉伸的位置,默认是中间位置	Array	否
sliceVertical	垂直方向上需要被拉伸的位置,默认是中间位置	Array	否

实现步骤

假设原图72*72的图片,需要拉伸成240*240的背景图片

1. 原图72*72，为了便于理解sliceHorizontal，sliceVertical分别取宽高的1/3、2/3坐标处[24,48]

2. 根据目标宽高240*240,对原图进行分割处理,在水平方向上24,与48位置将图片分割成[0 ~ 23, 24 ~ 47,48 ~ 71]三小块,垂直方向同理。

3. 剩下空白区域取对应位置上的一个像素的图片数据进行复制与填充

• X轴取一个像素宽,24像素高,往水平方向复制拉伸,宽度为(240 - 72) / sliceHorizontal.length = 84

	//需要拉伸复制的宽度，为了便于计算以及绘制的效率，取整
	const tw: number = Math.ceil((240 - 72) / sliceHorizontal.length);

  	//sh:24  tw：84 sourceData：1px的图片数据
	const { sh, tw, sourceData } = this;
    const pxData: Uint8ClampedArray = sourceData.data;
  	//每个像素点颜色由rgba四位0~255的整数组成
    const targetArray: Uint8ClampedArray = new Uint8ClampedArray(tw * sh * 4);
    for (let y = 0; y < sh; y++) {
        for (let x = 0; x < tw * 4; x++) {
            targetArray[x + y * tw * 4] = pxData[x % 4 + y * 4]
        }
    }
    const targetData: ImageData = new ImageData(targetArray, tw, sh)

• Y轴取一个像素高,24像素宽,往垂直方向复制拉伸，高度为(240 - 72) / sliceVertical.length

	//需要拉伸复制的高度，为了便于计算以及绘制的效率，取整
	const th: number = Math.ceil((240 - 72) / sliceVertical.length);

  	//sw:24  th：84 sourceData：1px的图片数据
	const { sw, th, sourceData } = this;
    const pxData: Uint8ClampedArray = sourceData.data;
    //每个像素点颜色由rgba四位0~255的整数组成
    const targetArray: Uint8ClampedArray = new Uint8ClampedArray(sw * th * 4);
    for (let y = 0; y < th; y++) {
        for (let x = 0; x < sw * 4; x++) {
            targetArray[x + y * sw * 4] = pxData[x % (sw * 4)]
        }
    }
    const targetData: ImageData = new ImageData(targetArray, sw, th)

• X轴,Y轴取一个像素宽,一个像素高,往XY轴拉伸复制

	const { tw, th, sourceData } = this;
	const pxData: Uint8ClampedArray = sourceData.data;
	const targetArray: Uint8ClampedArray = new Uint8ClampedArray(tw * th * 4);
	for (let y = 0; y < th; y++) {
	    for (let x = 0; x < tw * 4; x++) {
	        targetArray[x + y * tw * 4] = pxData[x % 4];
	    }
	}
	const targetData: ImageData = new ImageData(targetArray, tw, th)

• 最终效果

其他

当是第一次TS练手，希望路过的大佬们多多指教