Html5 Canvas实现图片标志、缩放、移动和生涯汗青状态成果 （附转换公式）

const wrap = document.getElementById('wrap') wrap.onmousedown = function (e) { const downX = e.pageX - wrap.offsetLeft const downY = e.pageY - wrap.offsetTop const scale = 3 const translateX = -40 const translateY = -40 const transformOriginX = 180 const transformOriginY = 180 const dot = document.getElementById('dot') dot.style.left = (transformOriginX - downX) / scale * (scale - 1) + downX - translateX + 'px' dot.style.top = (transformOriginY - downY) / scale * (scale - 1) + downY - translateY + 'px' }

也许有人会问，为什么要减去这个 offsetLeft 跟 offsetTop 呢，由于我们上面重复夸大，我们计较的是鼠标点击的坐标，而这个坐标照旧相对付我们展示容器的坐标，以是我们要减去容器自己的偏移量才行。

组件计划

既然demo啥的都已经测试了ok了，我们接下来就一一说明一下这个组件应该咋计划好呢（今朝仍为低配版，之后再举办优化完美）

1. 根基的画布组成

我们先简朴说明一下这个组成吧，着实首要就是一个画布的容器，右边一个器材栏，仅此罢了

概略就这样子啦！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!