在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片、文字等等进行操作,比如移动一下,旋转一下或者缩放等等。但普通的画布并没有对象记忆功能,它最终输出的只是一张图片,因此我们需要自己编写代码去保存绘制的对象,今天就跟大家简单说一下具体怎么实现。大家可以先看一下最终效果,可以对每个对象进行删除及旋转缩放操作。
一、绘制对象的信息
要对多个绘制的对象进行操作,肯定要知道该对象的信息。对象的属性可以定义如下:
{type:'image' , px:0, py:0 , width: 10 ,height: 10 ,ox: 5 ,oy: 5,degree:90}
type是绘制的对象的类型,比如图片、文字。为节省篇幅,本文将以图片为例。px,py是图片左上角顶点距离画布左上角顶点分别在x轴和y轴的距离;ox,oy是旋转原点的坐标。
二、绘制对象
for(var ti in t_icon){//遍历要绘制的对象
var obj=t_icon[ti];
var px = obj.px, py = obj.py, index = obj.cap_index,
size = obj.size, degree = obj.degree;
var wid = this.getCapWidth(size)//图片的宽高,为方便,本例中默认图片为正方形
var tmp = this.data.iconTmp[index];
//角度需转换为弧度制
degree = degree * Math.PI / 180;
var ox = px + (wid / 2), oy = py + (wid / 2)
ctx.translate(ox,oy);
ctx.rotate(degree );