可以绘制图片,也可以合成图片,这是的优点。但缺点也很明显:它没有DOM的概念,其中的图片元素不能像那般容易被选中和操作。参考阅读:canvas图片实现拖拽的思路和解决方法
实际上,和也可以实现图片的拖拽移动,其本质是改变图片在页面上的定位,使其脱离文档流,这是所具备的能力。这就是本文标题所说的边界偏移。
思路
和canvas实现图片拖拽的思路是一样的:鼠标移动时,将移动的偏移量计算出来,并将偏移量设置为元素的和即可实现图片的拖拽。
计算偏移量的参照物
按照上面的思路,找好计算偏移的参照物即可,在当前的情景下,鼠标就是最好的参照物,鼠标事件中有好几个坐标系可共使用,使用坐标值最佳。它表示鼠标距离浏览器内容区域左边界和上边界的距离,每次移动鼠标时这个值都会改变,想获取每次移动鼠标所产生的偏移使用接口即可,一图胜千言。
代码实现
十分重要的前提:这里操作都是,要想实现移动,那么该标签需要使用定位,让其脱离文档流从而实现移动,使用绝对定位还是相对定位,还是有讲究的:1、如果上一级元素有那么使用何种定位都没问题;2、如果上一级元素无,那么必须使用绝对定位。
代码中有两个地方需要说明
1、和有什么关系?
是的另外一种形式,前者返回的是整数类型,只读;后面返回的是带的字符串,可读写。这两个接口都是用来操作定位中的样式的,对应的则是样式。
2、看代码:为什么要加上一个的值
看截图,m1.style.left是赋值行为,initLeft是鼠标左键首次按下时所保存到图片元素的值,在示例中的样式中,可以明显看到,设置了的值。
假设,第一次x轴y轴均偏移了,将这个偏移分别设置为和时会发生什么事?那就是图片根本不动,因为赋值操作会覆盖原来就有点。
所以,要加上初始的和值,如果初始值都为,那也不会有任何影响。
通过DOM操作图片的优点
可以实现点击元素时,弹出对应的控件,如旋转图片、裁剪图片及替换图片等,可以拖拽文本,为文本更改样式、字号等,最后使用合成图片,当然,这是后话了。
领取专属 10元无门槛券
私享最新 技术干货