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

概述

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

详细

一、前期准备工作

1、基本需求。

实现上传图片

实现图片编辑

实现添加文字

实现导出图片

2、案例目录结构

二、程序实现具体步骤

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

// components/canvas-drag/index.js

const dragGraph = function ({ x, y, w, h, type, text, fontSize = 20, color = 'red', url }, canvas, factor) {

if (type === 'text') {

canvas.setFontSize(fontSize);

const textWidth = canvas.measureText(this.text).width;

const textHeight = fontSize + 10;

const halfWidth = textWidth / 2;

const halfHeight = textHeight / 2;

this.x = x + halfWidth;

this.y = y + halfHeight;

} else {

this.x = x;

this.y = y;

}

this.w = w;

this.h = h;

this.fileUrl = url;

this.text = text;

this.fontSize = fontSize;

this.color = color;

this.ctx = canvas;

this.rotate = 0;

this.type = type;

this.selected = true;

this.factor = factor;

this.MIN_WIDTH = 50;

this.MIN_FONTSIZE = 10;

}

dragGraph.prototype = {

/**

* 绘制元素

*/

paint() {

this.ctx.save();

// TODO 剪切

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

// this.ctx.clip();

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

if (this.type === 'text') {

this.ctx.setFontSize(this.fontSize);

this.ctx.setTextBaseline('middle');

this.ctx.setTextAlign('center');

this.ctx.setFillStyle(this.color);

}

// 选择区域的中心点

this.centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);

this.centerY = this.type === 'text' ? this.y : this.y + (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 === 'text') {

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

} else if (this.type === 'image') {

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

}

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

if (this.selected) {

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

this.ctx.setLineWidth(2);

this.ctx.setStrokeStyle('red');

this.ctx.lineDashOffset = 10;

if (this.type === 'text') {

const textWidth = this.ctx.measureText(this.text).width;

const textHeight = this.fontSize + 10

const halfWidth = textWidth / 2;

const halfHeight = textHeight / 2;

const textX = this.x - halfWidth;

const textY = this.y - halfHeight;

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

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

this.ctx.drawImage('./icon/scale.png', textX + textWidth - 15, textY + textHeight - 15, 30, 30);

} else {

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

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

this.ctx.drawImage('./icon/scale.png', this.x + this.w - 15, this.y + this.h - 15, 30, 30);

}