微信小程序之画布绘制并管理多张图片

在微信小程序的画布绘制多张图片，很简单，只需要调用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 );