canvas画条形图微信小程序_微信小程序canvas画布实现图片的编辑

概述

微信小程序--canvas画布实现图片的编辑

详细

一、前期准备工作

1、基本需求。

实现上传图片

实现图片编辑

实现添加文字

实现导出图片

2、案例目录结构

二、程序实现具体步骤

1.index.js代码(canvas-drag)

// components/canvas-drag/index.js

const dragGraph &＃61; function ({ x, y, w, h, type, text, fontSize &＃61; 20, color &＃61; &＃39;red&＃39;, url }, canvas, factor) {

if (type &＃61;&＃61;&＃61; &＃39;text&＃39;) {

canvas.setFontSize(fontSize);

const textWidth &＃61; canvas.measureText(this.text).width;

const textHeight &＃61; fontSize &＃43; 10;

const halfWidth &＃61; textWidth / 2;

const halfHeight &＃61; textHeight / 2;

this.x &＃61; x &＃43; halfWidth;

this.y &＃61; y &＃43; halfHeight;

} else {

this.x &＃61; x;

this.y &＃61; y;

}

this.w &＃61; w;

this.h &＃61; h;

this.fileUrl &＃61; url;

this.text &＃61; text;

this.fontSize &＃61; fontSize;

this.color &＃61; color;

this.ctx &＃61; canvas;

this.rotate &＃61; 0;

this.type &＃61; type;

this.selected &＃61; true;

this.factor &＃61; factor;

this.MIN_WIDTH &＃61; 50;

this.MIN_FONTSIZE &＃61; 10;

}

dragGraph.prototype &＃61; {

/**

* 绘制元素

*/

paint() {

this.ctx.save();

// TODO 剪切

// this._drawRadiusRect(0, 0, 700, 750, 300);

// this.ctx.clip();

// 由于measureText获取文字宽度依赖于样式&＃xff0c;所以如果是文字元素需要先设置样式

if (this.type &＃61;&＃61;&＃61; &＃39;text&＃39;) {

this.ctx.setFontSize(this.fontSize);

this.ctx.setTextBaseline(&＃39;middle&＃39;);

this.ctx.setTextAlign(&＃39;center&＃39;);

this.ctx.setFillStyle(this.color);

}

// 选择区域的中心点

this.centerX &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.x : this.x &＃43; (this.w / 2);

this.centerY &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.y : this.y &＃43; (this.h / 2);

// 旋转元素

this.ctx.translate(this.centerX, this.centerY);

this.ctx.rotate(this.rotate * Math.PI / 180);

this.ctx.translate(-this.centerX, -this.centerY);

// 渲染元素

if (this.type &＃61;&＃61;&＃61; &＃39;text&＃39;) {

this.ctx.fillText(this.text, this.x, this.y);

} else if (this.type &＃61;&＃61;&＃61; &＃39;image&＃39;) {

this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);

}

// 如果是选中状态&＃xff0c;绘制选择虚线框&＃xff0c;和缩放图标、删除图标

if (this.selected) {

this.ctx.setLineDash([10, 10]);

this.ctx.setLineWidth(2);

this.ctx.setStrokeStyle(&＃39;red&＃39;);

this.ctx.lineDashOffset &＃61; 10;

if (this.type &＃61;&＃61;&＃61; &＃39;text&＃39;) {

const textWidth &＃61; this.ctx.measureText(this.text).width;

const textHeight &＃61; this.fontSize &＃43; 10

const halfWidth &＃61; textWidth / 2;

const halfHeight &＃61; textHeight / 2;

const textX &＃61; this.x - halfWidth;

const textY &＃61; this.y - halfHeight;

this.ctx.strokeRect(textX, textY, textWidth, textHeight);

this.ctx.drawImage(&＃39;./icon/close.png&＃39;, textX - 15, textY - 15, 30, 30);

this.ctx.drawImage(&＃39;./icon/scale.png&＃39;, textX &＃43; textWidth - 15, textY &＃43; textHeight - 15, 30, 30);

} else {

this.ctx.strokeRect(this.x, this.y, this.w, this.h);

this.ctx.drawImage(&＃39;./icon/close.png&＃39;, this.x - 15, this.y - 15, 30, 30);

this.ctx.drawImage(&＃39;./icon/scale.png&＃39;, this.x &＃43; this.w - 15, this.y &＃43; this.h - 15, 30, 30);

}

}

this.ctx.restore();

},

/**

* 判断点击的坐标落在哪个区域

* &＃64;param {*} x 点击的坐标

* &＃64;param {*} y 点击的坐标

*/

isInGraph(x, y) {

const selectW &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.ctx.measureText(this.text).width : this.w;

const selectH &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.fontSize &＃43; 10 : this.h;

// 删除区域左上角的坐标和区域的高度宽度

const delW &＃61; 30;

const delH &＃61; 30;

const delX &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.x - (selectW / 2) : this.x;

const delY &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.y - (selectH / 2) : this.y;

// 旋转后的删除区域坐标

const transformDelX &＃61; this._getTransform(delX, delY, this.rotate - this._getAngle(this.centerX, this.centerY, delX, delY)).x - (delW / 2);

const transformDelY &＃61; this._getTransform(delX, delY, this.rotate - this._getAngle(this.centerX, this.centerY, delX, delY)).y - (delH / 2);

// 变换区域左上角的坐标和区域的高度宽度

const scaleW &＃61; 30;

const scaleH &＃61; 30;

const scaleX &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.x &＃43; (selectW / 2) : this.x &＃43; selectW;

const scaleY &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.y &＃43; (selectH / 2) : this.y &＃43; selectH;

// 旋转后的变换区域坐标

const transformScaleX &＃61; this._getTransform(scaleX, scaleY, this.rotate &＃43; this._getAngle(this.centerX, this.centerY, scaleX, scaleY)).x - (scaleW / 2);

const transformScaleY &＃61; this._getTransform(scaleX, scaleY, this.rotate &＃43; this._getAngle(this.centerX, this.centerY, scaleX, scaleY)).y - (scaleH / 2);

const moveX &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.x - (selectW / 2) : this.x;

const moveY &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.y - (selectH / 2) : this.y;

// 测试使用

// this.ctx.setLineWidth(1);

// this.ctx.setStrokeStyle(&＃39;red&＃39;);

// this.ctx.strokeRect(transformDelX, transformDelY, delW, delH);

// this.ctx.setLineWidth(1);

// this.ctx.setStrokeStyle(&＃39;black&＃39;);

// this.ctx.strokeRect(transformScaleX, transformScaleY, scaleW, scaleH);

if (x - transformScaleX >&＃61; 0 && y - transformScaleY >&＃61; 0 &&

transformScaleX &＃43; scaleW - x >&＃61; 0 && transformScaleY &＃43; scaleH - y >&＃61; 0) {

// 缩放区域

return &＃39;transform&＃39;;

} else if (x - transformDelX >&＃61; 0 && y - transformDelY >&＃61; 0 &&

transformDelX &＃43; delW - x >&＃61; 0 && transformDelY &＃43; delH - y >&＃61; 0) {

// 删除区域

return &＃39;del&＃39;;

} else if (x - moveX >&＃61; 0 && y - moveY >&＃61; 0 &&

moveX &＃43; selectW - x >&＃61; 0 && moveY &＃43; selectH - y >&＃61; 0) {

// 移动区域

return &＃39;move&＃39;;

}

// 不在选择区域里面

return false;

},

/**

* 两点求角度

* &＃64;param {*} px1

* &＃64;param {*} py1

* &＃64;param {*} px2

* &＃64;param {*} py2

*/

_getAngle(px1, py1, px2, py2) {

const x &＃61; px2 - px1;

const y &＃61; py2 - py1;

const hypotenuse &＃61; Math.sqrt(Math.pow(x, 2) &＃43; Math.pow(y, 2));

//斜边长度

const cos &＃61; x / hypotenuse;

const radian &＃61; Math.acos(cos);

const angle &＃61; 180 / (Math.PI / radian);

return angle;

},

/**

* 点选择一定角度之后的坐标

* &＃64;param {*} x

* &＃64;param {*} y

* &＃64;param {*} rotate 旋转的角度

*/

_getTransform(x, y, rotate) {

const angle &＃61; (Math.PI / 180) * (rotate);

const r &＃61; Math.sqrt(Math.pow((x - this.centerX), 2) &＃43; Math.pow((y - this.centerY), 2));

const a &＃61; Math.sin(angle) * r;

const b &＃61; Math.cos(angle) * r;

return {

x: this.centerX &＃43; b,

y: this.centerY &＃43; a,

};

},

/**

*

* &＃64;param {*} px 手指按下去的坐标

* &＃64;param {*} py 手指按下去的坐标

* &＃64;param {*} x 手指移动到的坐标

* &＃64;param {*} y 手指移动到的坐标

* &＃64;param {*} currentGraph 当前图层的信息

*/

transform(px, py, x, y, currentGraph) {

// 获取选择区域的宽度高度

if (this.type &＃61;&＃61;&＃61; &＃39;text&＃39;) {

this.ctx.setFontSize(this.fontSize);

}

const centerX &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.x : this.x &＃43; (this.w / 2);

const centerY &＃61; this.type &＃61;&＃61;&＃61; &＃39;text&＃39; ? this.y : this.y &＃43; (this.h / 2);

const diffXBefore &＃61; px - centerX;

const diffYBefore &＃61; py - centerY;

const diffXAfter &＃61; x - centerX;

const diffYAfter &＃61; y - centerY;

const angleBefore &＃61; Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;

const angleAfter &＃61; Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;

// 旋转的角度

this.rotate &＃61; currentGraph.rotate &＃43; angleAfter - angleBefore;

const lineA &＃61; Math.sqrt(Math.pow((centerX - px), 2) &＃43; Math.pow((centerY - py), 2));

const lineB &＃61; Math.sqrt(Math.pow((centerX - x), 2) &＃43; Math.pow((centerY - y), 2));

if (this.type &＃61;&＃61;&＃61; &＃39;image&＃39;) {

const w &＃61; currentGraph.w &＃43; (lineB - lineA);

const h &＃61; currentGraph.h &＃43; (lineB - lineA);

this.w &＃61; w <&＃61; this.MIN_WIDTH ? this.MIN_WIDTH : w;

this.h &＃61; h <&＃61; this.MIN_WIDTH ? this.MIN_WIDTH : h;

if (w > this.MIN_WIDTH && h > this.MIN_WIDTH) {

// 放大 或 缩小

this.x &＃61; currentGraph.x - (lineB - lineA) / 2;

this.y &＃61; currentGraph.y - (lineB - lineA) / 2;

}

} else if (this.type &＃61;&＃61;&＃61; &＃39;text&＃39;) {

const fontSize &＃61; currentGraph.fontSize * ((lineB - lineA) / lineA &＃43; 1);

this.fontSize &＃61; fontSize <&＃61; this.MIN_FONTSIZE ? this.MIN_FONTSIZE : fontSize;

}

},

/**

* 画圆角矩形

*/

_drawRadiusRect(x, y, w, h, r) {

const br &＃61; r / 2;

this.ctx.beginPath();

this.ctx.moveTo(this.toPx(x &＃43; br), this.toPx(y)); // 移动到左上角的点

this.ctx.lineTo(this.toPx(x &＃43; w - br), this.toPx(y));

this.ctx.arcTo(this.toPx(x &＃43; w), this.toPx(y), this.toPx(x &＃43; w), this.toPx(y &＃43; br), this.toPx(br));

this.ctx.lineTo(this.toPx(x &＃43; w), this.toPx(y &＃43; h - br));

this.ctx.arcTo(this.toPx(x &＃43; w), this.toPx(y &＃43; h), this.toPx(x &＃43; w - br), this.toPx(y &＃43; h), this.toPx(br));

this.ctx.lineTo(this.toPx(x &＃43; br), this.toPx(y &＃43; h));

this.ctx.arcTo(this.toPx(x), this.toPx(y &＃43; h), this.toPx(x), this.toPx(y &＃43; h - br), this.toPx(br));

this.ctx.lineTo(this.toPx(x), this.toPx(y &＃43; br));

this.ctx.arcTo(this.toPx(x), this.toPx(y), this.toPx(x &＃43; br), this.toPx(y), this.toPx(br));

},

toPx(rpx) {

return rpx * this.factor;

},

}

Component({

/**

* 组件的属性列表

*/

properties: {

graph: {

type: Object,

value: {},

observer: &＃39;onGraphChange&＃39;,

},

bgColor: {

type: String,

value: &＃39;&＃39;,

},

bgImage: {

type: String,

value: &＃39;&＃39;,

},

width: {

type: Number,

value: 750,

},

height: {

type: Number,

value: 750,

},

},

/**

* 组件的初始数据

*/

data: {

},

attached() {

const sysInfo &＃61; wx.getSystemInfoSync();

const screenWidth &＃61; sysInfo.screenWidth;

this.factor &＃61; screenWidth / 750;

if (typeof this.drawArr &＃61;&＃61;&＃61; &＃39;undefined&＃39;) {

this.drawArr &＃61; [];

}

this.ctx &＃61; wx.createCanvasContext(&＃39;canvas-label&＃39;, this);

this.draw();

},

/**

* 组件的方法列表

*/

methods: {

toPx(rpx) {

return rpx * this.factor;

},

onGraphChange(n, o) {

if (JSON.stringify(n) &＃61;&＃61;&＃61; &＃39;{}&＃39;) return;

this.drawArr.push(new dragGraph(Object.assign({

x: 30,

y: 30,

}, n), this.ctx, this.factor));

this.draw();

},

draw() {

if (this.data.bgImage !&＃61;&＃61; &＃39;&＃39;) {

this.ctx.drawImage(this.data.bgImage, 0, 0, this.toPx(this.data.width), this.toPx(this.data.height));

}

if (this.data.bgColor !&＃61;&＃61; &＃39;&＃39;) {

this.ctx.save();

this.ctx.setFillStyle(this.data.bgColor);

this.ctx.fillRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));

this.ctx.restore();

}

this.drawArr.forEach((item) &＃61;> {

item.paint();

});

return new Promise((resolve) &＃61;> {

this.ctx.draw(false, () &＃61;> {

resolve();

});

});

},

start(e) {

const { x, y } &＃61; e.touches[0];

this.tempGraphArr &＃61; [];

this.drawArr && this.drawArr.forEach((item, index) &＃61;> {

item.selected &＃61; false;

const action &＃61; item.isInGraph(x, y);

if (action) {

if (action &＃61;&＃61;&＃61; &＃39;del&＃39;) {

this.drawArr.splice(index, 1);

this.ctx.clearRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));

this.ctx.draw();

} else if (action &＃61;&＃61;&＃61; &＃39;transform&＃39; || action &＃61;&＃61;&＃61; &＃39;move&＃39;) {

item.action &＃61; action;

this.tempGraphArr.push(item);

// 保存点击时的坐标

this.currentTouch &＃61; { x, y };

}

}

});

// 保存点击时元素的信息

if (this.tempGraphArr.length > 0) {

const lastIndex &＃61; this.tempGraphArr.length - 1;

this.tempGraphArr[lastIndex].selected &＃61; true;

this.currentGraph &＃61; Object.assign({}, this.tempGraphArr[lastIndex]);

}

this.draw();

},

move(e) {

const { x, y } &＃61; e.touches[0];

if (this.tempGraphArr && this.tempGraphArr.length > 0) {

const currentGraph &＃61; this.tempGraphArr[this.tempGraphArr.length - 1];

if (currentGraph.action &＃61;&＃61;&＃61; &＃39;move&＃39;) {

currentGraph.x &＃61; this.currentGraph.x &＃43; (x - this.currentTouch.x);

currentGraph.y &＃61; this.currentGraph.y &＃43; (y - this.currentTouch.y);

} else if (currentGraph.action &＃61;&＃61;&＃61; &＃39;transform&＃39;) {

currentGraph.transform(this.currentTouch.x, this.currentTouch.y, x, y, this.currentGraph);

}

this.draw();

}

},

end(e) {

this.tempGraphArr &＃61; [];

},

export() {

return new Promise((resolve, reject) &＃61;> {

this.drawArr &＃61; this.drawArr.map((item) &＃61;> {

item.selected &＃61; false;

return item;

});

this.draw().then(() &＃61;> {

wx.canvasToTempFilePath({

canvasId: &＃39;canvas-label&＃39;,

success: (res) &＃61;> { resolve(res.tempFilePath); },

fail: (e) &＃61;> { reject(e); },

}, this);

});

})

},

changColor(color) {

const selected &＃61; this.drawArr.filter((item) &＃61;> item.selected);

if (selected.length > 0) {

selected[0].color &＃61; color;

}

this.draw();

},

changeBgColor(color) {

this.data.bgImage &＃61; &＃39;&＃39;;

this.data.bgColor &＃61; color;

this.draw();

},

changeBgImage(url) {

this.data.bgColor &＃61; &＃39;&＃39;;

this.data.bgImage &＃61; url;

this.draw();

}

}

})

2.index.wxss代码(canvas-drag)

/* components/canvas-drag/index.wxss */

.movable-label {

margin-top: 300rpx;

width: 750rpx;

height: 400rpx;

background: #eee;

}

.movable-block {

width: 120rpx;

height: 120rpx;

background: #ccc;

}

.movable-block .image-con {

width: 100%;

height: 100%;

}

3.index.wxml代码(canvas-drag)

disable-scroll&＃61;"true"

bindtouchstart&＃61;"start"

bindtouchmove&＃61;"move"

bindtouchend&＃61;"end"

style&＃61;&＃39;width: {{width}}rpx; height: {{height}}rpx;&＃39;>

4.index.js逻辑代码(index)

a.部分的功能实现

import CanvasDrag from &＃39;../../components/canvas-drag/canvas-drag&＃39;;

Page({

data: {

graph: {},

},

/**

* 添加测试图片

*/

onAddTest() {

this.setData({

graph: {

w: 120,

h: 120,

type: &＃39;image&＃39;,

url: &＃39;../../assets/images/test.jpg&＃39;,

}

});

},

/**

* 添加图片

*/

onAddImage() {

wx.chooseImage({

success: (res) &＃61;> {

this.setData({

graph: {

w: 200,

h: 200,

type: &＃39;image&＃39;,

url: res.tempFilePaths[0],

}

});

}

})

},

/**

* 添加文本

*/

onAddText() {

this.setData({

graph: {

type: &＃39;text&＃39;,

text: &＃39;helloworld&＃39;,

}

});

},

/**

* 导出图片

*/

onExport() {

CanvasDrag.export()

.then((filePath) &＃61;> {

console.log(filePath);

wx.previewImage({

urls: [filePath]

})

})

.catch((e) &＃61;> {

console.error(e);

})

},

/**

* 改变文字颜色

*/

onChangeColor() {

CanvasDrag.changFontColor(&＃39;blue&＃39;);

},

/**

* 改变背景颜色

*/

onChangeBgColor() {

CanvasDrag.changeBgColor(&＃39;yellow&＃39;);

},

/**

* 改变背景照片

*/

onChangeBgImage() {

CanvasDrag.changeBgImage(&＃39;../../assets/images/test.jpg&＃39;);

},

})

三、案例运行效果图

四、总结与备注

暂无

注&＃xff1a;本文著作权归作者&＃xff0c;由demo大师发表&＃xff0c;拒绝转载&＃xff0c;转载需要作者授权