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. 基本的画布构成

我们先简单分析一下这个构成吧，其实主要就是一个画布的容器，右边一个工具栏，仅此而已

大体就这样子啦！

（编辑：PHP编程网 - 黄冈站长网）

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