canvas中放入一张图片，但是其中的图片可以旋转 移动

Question

canvas中放入一张图片，但是其中的图片可以旋转 移动，如果 我旋转了那张图，然后想要移动那张图片，请问坐标怎么确定？一直不会坐标的计算 导致移动的时候各种方向错乱。

Answer 1

巧了，手上的项目就是做这个，我是这么做的，仅供参考：
1.canvas区域内的每一个图片都有对应的内存对象，记录左上角坐标x,y，长宽width,height,角度 angle；
2.全局定义RefreshCanvas()方法，根据内存对象中的属性实时绘制；
3.一定要区分旋转和平移，否则会乱套，对于旋转，我规定只有鼠标点在图片的右上角小区域时判定为旋转，鼠标点在图片其余区域时为平移；
4.在鼠标的mousedown判断当前要变换的是哪个图？旋转还是平移?，在mousemove时计算鼠标位置的变化，修改对应内存对象中的各个属性（平移修改x,y，旋转修改angle），然后调用RefreshCanvas()绘制canvas。

关于RefreshCanvas()，我想题主应该能够很容易的找到canvas绘制image的方法，唯一提醒的是别忘了旋转时会把中心translate到图片的正中，之后一定不能忘了移回左上角。这里给题主贴一小段：

    var img = new Image();
    img.src = item.background;
    context.save();
    context.translate(item.x + (item.width / 2), item.y + (item.height / 2));
    context.rotate(item.angle;);
    context.translate(-(item.x + (item.width / 2)), -(item.y + (item.height / 2)));
    context.drawImage(img, item.x, item.y, item.width, item.height);
    context.restore(); 

其实把restore（）放前面就可以把中心切回save（）前状态,这里没这么写是想看得清楚点，就是这样

P.S. canvas的图形变换真有意思，旋转涉及到三角函数，选中涉及到不规则多边形落点判断，相当有趣。

Answer 2

通常旋转都是相对于原点来的，你可以通过旋转整个画布来达到旋转图片的目的。
这样图片的坐标是不变的，正常移动即可了。

Answer 3

图片是规则的形状

固定旋转角度

可以通过三角函数取得左上角的坐标,这个是最简单的，你的左上角到

不固定旋转角度

那么是否监听旋转的角度呢，或者说，你的旋转是如何实现的

1. 监听，解决方法同上

2. 不监听，要看你的旋转实现方式了

Answer 4

我最近做了个插件，能在页面上选择图层进行旋转，放大，移动的操作，然后合并成一张图片。
http://jackgit.github.io/imag...

git: https://github.com/JackGit/im...

我的思路是：

1. 不直接在canvas上对图像进行操作
2. 图像的操作都直接在<img>上进行，利用css的transform
3. 每个操作都要保留记录，例如x轴移动了多少距离，旋转了多少度，放大了几倍
4. 需要在canvas绘制时，需要将对图片的操作在canvas中再做一遍即可

过程中我也遇到了坐标混乱问题，特别是图像放大之后。总结是：

1. 对于图像，操作时基于中心点，因为不管什么操作，图像的中心点都不会变
2. 记住图像的原始长宽
3. 基于中心点，原始长宽，以及纪录下来的图像操作（位移，放大倍数，旋转角度）能清晰的计算操作后的结果