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

// 监听鼠标滚轮，更新画布缩放倍数 const handleCanvas = () => { const { current: wrap } = wrapRef // 省略一万字... wrap.onwheel = null wrap.onwheel = (e: MouseWheelEvent) => { const { deltaY } = e // 这里要留意一下，我是0.1来递增递减，可是由于JS行使IEEE 754，来计较，以是精度有题目，我们本身处理赏罚一下 const newScale: number = deltaY > 0 ? (canvasScale * 10 - 0.1 * 10) / 10 : (canvasScale * 10 + 0.1 * 10) / 10 if (newScale < 0.1 || newScale > 2) return setCanvasScale(newScale) } } // 监听滑动条来节制缩放 <Slider min={0.1} max={2.01} step={0.1} value={canvasScale} tipFormatter={(value) => `${(value).toFixed(2)}x`} onChange={handleScaleChange} /> const handleScaleChange = (value: number) => { setCanvasScale(value) }

接着我们行使hooks的副浸染函数，依靠于画布缩放倍数来举办样式的更新

（编辑：湖南网）

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