Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）

// 重置变换参数，重新绘制图片 useEffect(() => { setIsLoading(true) translatePointXRef.current = 0 translatePointYRef.current = 0 fillStartPointXRef.current = 0 fillStartPointYRef.current = 0 setCanvasScale(1) fillImage() }, [fillImageSrc]) const handlePaperChange = (value: string) => { const fillImageList = { 'xueshengjia': 'http://cdn.algbb.cn/test/canvasTest.jpg', 'xueshengyi': 'http://cdn.algbb.cn/test/canvasTest2.png', 'xueshengbing': 'http://cdn.algbb.cn/emoji/30.png', } setFillImageSrc(fillImageList[value]) }

注意事项

注意容器的偏移量

我们需要注意一下，因为公式中的 downX 是相对容器的坐标，也就是说，我们需要减去容器的偏移量，这种情况会出现在使用了 margin 等参数，或者说上方或者左侧有别的元素的情况

我们输出一下我们红色的元素的 offsetLeft 等属性，会发现他是已经本身就有50的偏移量了，我们计算鼠标点击的坐标的时候就要减去这一部分的偏移量

window.onload = function () { const test = document.getElementById('test') console.log(`offsetLeft: ${test.offsetLeft}, offsetHeight: ${test.offsetTop}`) } html, body { margin: 0; padding: 0; } #test { width: 50px; height: 50px; margin-left: 50px; background: red; } <div class="container"> <div id="test"></div> </div>

注意父组件使用relative相对布局的情况

假如我们现在有一种这种的布局，打印红色元素的偏移量，看起来都挺正常的

但是如果我们目标元素的父元素（也就是黄色部分）设置 relative 相对布局

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

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