想用canvas制作一个画板,有两点不知道怎么实现,请教一下?
画完一个圆或者其他图形,再次编辑放大拖拽移动怎么实现?如果是清空重绘,下层的其他图形怎么保护?
要给图形添加文字怎么关联这两者?能保证两者同时被拖拽移动或者删除?
想实现的效果
ringa_lee
实现起来比较复杂,但也并不是无迹可寻。
时间关系,推荐你直接上手 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
欢迎评论,如有错误或者可优化的地方,请麻烦指出,感谢。
給每次畫出的東西分配一個 "會在canvas畫出東西的" JS對象 (設計模式--Command), 編輯時修改這個對象然後重畫
給畫出的東西分組時, 可以把每組再打包成一個Command對象 (設計模式-Composition), 整組移動時以這個打包後的對象為單位
实现起来比较复杂,但也并不是无迹可寻。
时间关系,推荐你直接上手 createjs,你想要的功能都具备。
下面整理了一下后续评论中的内容
实现思路
嗯,比如一个能拖拽移动的圆,如果清空重绘整个画布,如何保证这个圆的状态得到保存呢? 比较简单的思路是将当时的位置,颜色,大小等等属性内聚到一个对象里,这里建议创建一个圆对象,内置这些属性以及相应的绘制方法。
如何实现跟踪移动呢?这个我倒是没有具体的实践过,应该可以通过圆在画布的坐标轴上的位置来分配鼠标拖放事件。这里我觉得比较难。最粗糙的方法就是查看鼠标相应的位置是否包含在圆的范围内。
具体实现
清明节在岳父家里,比较无聊,花了1个多小时写了个canvas-helper实现了下移动画布上的图形。可以在线预览下。
http://rawgit.com/wangpin34/canvas-helper/master/index.html
欢迎评论,如有错误或者可优化的地方,请麻烦指出,感谢。
給每次畫出的東西分配一個 "會在canvas畫出東西的" JS對象 (設計模式--Command), 編輯時修改這個對象然後重畫
給畫出的東西分組時, 可以把每組再打包成一個Command對象 (設計模式-Composition), 整組移動時以這個打包後的對象為單位