目录前言关于边框关于控制点本章小结前言在上一章中我们已经搞定了下层画布,也就是能够对物体进行绘制了,现在就可以开始搞搞上层交互了。不过在和画布产生交互之前,我们还要做一件事情,就是让物体支持边框和控制点的绘制,亦即物体被选中时的状态,就像下面这样:这样一来如果要对物体进行一些操作,那就变成了对上图中的红色和蓝色边框进行
目录前言框选的实现Group 类的实现小结前言虽然这两个月基金涨的还行,但是离回本还有一大大大段距离????。今天呢,我们要实现的是 canvas 中物体的框选功能,大概就像下面这个样子:然后话不多说,直接开撸 ✍????框选的实现先来说下拖蓝选区(鼠标拖拽区域)的实现方式吧,仔细观察你会发现选区其实就是个普通矩形,这个区域由鼠标
目录前言hover 的实现click 的实现矩形的坐标哪来的点在多边形内的其他判断方法穿透本章小结前言上个章节中我们已经给物体加上了被选中的效果,现在可以上点交互了,这个章节主要实现的就是物体的 hover 和 click 事件,当鼠标 hover 到物体上时,我们会改变鼠标的样式使其变成移动的样子;当 hover 到
目录前言FabricImage 图片类事件派发小结前言虽然我们讲了这么多个章节,但其实目前为止就只有一个 Rect 类能用,略显单调。于是乎,为了让整个画布稍微生动一些,这个章节我们来尝试增加一个图片类,如果你以后需要扩展一个物体类,也是用同样的方法。另外有时候我们还希望在物体属性改变时或者画布创建后做一些额外的事情,
目录正文拖拽旋转缩放小结正文到目前为止,我们已经能够对物体进行点选和框选的操作了,但是这还不够,因为并没有什么实际性的改变,并且画布看起来也有点呆板,所以这个章节的主要目的就是让画布中的物体活起来,其实就是增加一些常见的交互而已啦????,比如拖拽、旋转和缩放。这是这个系列最重要的章节之一,希望能够对你有所帮助。拖拽先来说说
长按识别二维码并关注微信
更方便到期提醒、手机管理