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 相对机关

（编辑：湖南网）

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