首页 > canvas中放入一张图片,但是其中的图片可以旋转 移动

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

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


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


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

我的思路是:

  1. 不直接在canvas上对图像进行操作

  2. 图像的操作都直接在<img>上进行,利用css的transform

  3. 每个操作都要保留记录,例如x轴移动了多少距离,旋转了多少度,放大了几倍

  4. 需要在canvas绘制时,需要将对图片的操作在canvas中再做一遍即可

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

  1. 对于图像,操作时基于中心点,因为不管什么操作,图像的中心点都不会变

  2. 记住图像的原始长宽

  3. 基于中心点,原始长宽,以及纪录下来的图像操作(位移,放大倍数,旋转角度)能清晰的计算操作后的结果

---- 更新demo地址----
http://demo.jackyang.me/image-editor/app/demo.html


巧了,手上的项目就是做这个,我是这么做的,仅供参考:
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的图形变换真有意思,旋转涉及到三角函数,选中涉及到不规则多边形落点判断,相当有趣。


图片是规则的形状

固定旋转角度

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

不固定旋转角度

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

  1. 监听,解决方法同上

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

【热门文章】
【热门文章】