javascript - 关于canvas制作画板

问题描述

问 题

想用canvas制作一个画板,有两点不知道怎么实现,请教一下?

1. 画完一个圆或者其他图形,再次编辑放大拖拽移动怎么实现?如果是清空重绘,下层的其他图形怎么保护?

2. 要给图形添加文字怎么关联这两者?能保证两者同时被拖拽移动或者删除?

想实现的效果

解决方案

实现起来比较复杂，但也并不是无迹可寻。

时间关系，推荐你直接上手 createjs，你想要的功能都具备。

下面整理了一下后续评论中的内容

实现思路

嗯，比如一个能拖拽移动的圆，如果清空重绘整个画布，如何保证这个圆的状态得到保存呢？ 比较简单的思路是将当时的位置，颜色，大小等等属性内聚到一个对象里，这里建议创建一个圆对象，内置这些属性以及相应的绘制方法。

var circle = {
  x: posX,
  y: poxY,
  ... other properties
  draw():function(){}
}

如何实现跟踪移动呢？这个我倒是没有具体的实践过，应该可以通过圆在画布的坐标轴上的位置来分配鼠标拖放事件。这里我觉得比较难。最粗糙的方法就是查看鼠标相应的位置是否包含在圆的范围内。

canvas.addEventListener('mousedown',function(){
  //如果鼠标点击在圆上，则设定圆为当前选中对象
  canvas.addEventListener('mousemove', function(){
   //移动选中的对象
  })
})

具体实现

清明节在岳父家里，比较无聊，花了1个多小时写了个canvas-helper实现了下移动画布上的图形。可以在线预览下。
http://rawgit.com/wangpin34/canvas-helper/master/index.html

欢迎评论，如有错误或者可优化的地方，请麻烦指出，感谢。

这篇关于javascript - 关于canvas制作画板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！