如何解决react canvas.scale 在设置时似乎行为不正确
我有一个组件可以创建一个画布，另一个组件可以控制事件发生的情况：
2 (False,'0')
3 (True,'3')
4 (True,'-')
5 (False,'0')
每当我这样做时会发生什么是缩放设置正确（缩放在我的 const Parent = () => {
const [canvasRef,zoom,setZoom] = useCanvas();
const onMouseWheel = (e) => {
let tmpZoom = zoom + (e.deltaY / 1000);
setZoom(tmpZoom);
}
return (
<canvas
ref={canvasRef}
width={canvasDimentions.width} // 1080
height={canvasDimentions.height} // 1920
onWheelCapture={onMouseWheel}
/>
);
}
const useCanvas = () => {
const [zoom,setZoom] = useState(1);
const canvasRef = useRef(null);
useEffect(() => {
const canvasObj = canvasRef.current;
const ctx = canvasObj.getContext('2d');
ctx.clearRect(0,canvasDimentions.width * zoom,canvasDimentions.height * zoom); // width * height intial 1920,1080
console.log(zoom);
ctx.scale(zoom,zoom)
drawSquare(); // draws a simple 100 x 100 square
},[zoom])
return [canvasRef,setZoom];
}
内正确缓慢增加，当我向相反方向滚动时会减少。
我对 console.log(zoom) 的奇怪行为是，假设我缩小：（1,0.9,0.8 .. 等）然后向另一个方向放大（0.8,1,1.1 . .. 等）它会继续缩小而不是以另一种方式放大（返回），或者它会随机跳转到正确的值。
我知道 ctx.scale(zoom,zoom) 是异步的，但如果是这种情况，我的 console.log 在传递缩放比例之前如何每次都正确？
解决方法
这与 reactjs 无关，这就是 2D 上下文 scale 方法的工作原理。
ctx.scale(x,y) 确实采用当前变换矩阵并将其 scaleX 和 scaleY 成员乘以 x 和 y。
因此，如果您先调用 scale(0.7,0.7) 然后调用 scale(0.8,0.8)，即使是第二次调用实际上也会使上下文的变换更小：
开始时scaleX 和Y 是1，在第一次调用时它们变成0.7 (1 x 0.7)，然后它们变成0.56 (0.7 x 0.8)。
也许您更喜欢 setTransform 方法，它绝对设置转换矩阵。
用这个方法你就可以了
ctx.setTransform(zoom,zoom,0);
这里从 0.7 到 0.8 会产生您预期的放大结果。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
