> 脚本语言 > >

Canvas画图：鼠标移动图形 2016-07-25 11:24　出处：清屏网　人气：　

之前那篇Canvas画图-鼠标涂鸦已经可以实现与Canvas的简单交互，这篇会介绍Canvas中实现交互性的一个重要方法isPointInPath。

基本原理

Cavnas的确能实现很多很酷炫狂拽屌炸天的效果，但是交互性要差很多，简单的鼠标单击选中某个图形，都要花费一番周折。

Canvas只是一个dom节点，所有监听的事件都只能绑定在这个节点上，但是我们可能需要对Canvas上的某个元素进行操作。基本的原理就是事件还是绑定在Canvas上，通过判断点击发生的位置是否在Canvas中某个图形的路径内 (这里注意，我没有说是某个图形的区域内) ，从而进一步确定是在哪个图形上戳来戳去。

isPointInPath

为了让我们判断点击点到底是否在路径内，Canvas提供了 context.isPointInPath(x,y) 方法，参数自然是某个点的横竖坐标。

来个例子，先随便画三个矩形：

另外再写个 getCanvasPoint 方法，主要把点击坐标换算成Canvas里面的坐标：

是时候该 isPointInPath 方法登场，实现点中某个矩形的时候改变矩形边框的颜色

这里我们从预定义的 rectList 中依次拿出每个长方形参数，分表是左上角的x坐标，y坐标，长，宽。然后先画出长方形的路径，画完一个用 isPointInPath 方法判断一下点击点是否在当前路径中，如果在，就给当前的改颜色，如果不在就画出来然后继续画下一个长方形继续判断路径。

是不是很麻烦， isPointInPath 只对当前路径有效,也就说我们不能把三个长方形都画完了再判断某个点是否在第一个长方形路径中，而必须是每次画完一个长方形就要判断一次，而且Canvas中路径是不能保存的，要改变某一条路径，就必须把整个Canvas重新画一遍。

所以这里我们在循环中不单单是绘制了点中的长方形，还要绘制没点的长方形。

拖动元素

基本原理就是上面那样，看到这里，你已经洞悉了Canvas实现点击等事件的小秘密。那我们就继续实现拖动其中的元素吧。

依然是熟悉的味道，依然是熟悉的配方。我们还是依赖 mousemove 方法，移动端请用 touchmove 方法。

因为之前在点击的时候我们已经把是哪个长方形被选中给保存在变量 moveItem 中了，所以这里就直接判断就好了。是要拖动的元素就把长方形的x,y对应拖动的距离进行更新。同样是要把整个Canvas都绘制一遍。

另外在 mouseup 事件中保存下状态，方便下次绘画:

记住：在Canvas中不管你搞什么幺蛾子，都要按照之前的规则把所有路径绘制一遍。

上个效果图：

完整代码：

https://github.com/bob-chen/canvas-demo/blob/master/basic/movebymouse.html

参考

分享给小伙伴们：

本文标签： Canvas/">Canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻