Question

我正在尝试在反应组件中绘制画布。该组件根据传递给它的数组的长度绘制一条线和一些正方形作为道具倾斜旋转所有它们取决于另一个道具。我有一个循环，它完美地绘制它直到它到达第5次迭代，然后发生了一些事情，它开始混乱旋转后的上下文恢复。该循环中只有一个值的变化（initialX）在浏览器中调试循环，旋转方法的调用次数与恢复次数相同。我对这种行为感到很困惑，这是一个非常简单的画面，我看不出我的错误在哪里。

This is what I'm getting

This is the same sketch without applying rotation

class Sketch extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        let canvas = document.getElementById("plano");
        let detector = this.props.detector
        let X, Y;
        if (canvas && canvas.getContext && detector) {
            inicializarCanvas(detector);

            function inicializarCanvas(detector) {
                let ctx = canvas.getContext("2d");
                let s = getComputedStyle(canvas);
                let w = s.width;
                let h = s.height;
                canvas.width = w.split("px")[0];
                canvas.height = h.split("px")[0];
                X = canvas.width / 2;
                Y = canvas.height / 2;

                //draw beam
                ctx.moveTo( canvas.width / 3, canvas.height / 2);
                ctx.lineTo(0, canvas.height / 2);
                ctx.strokeStyle = "#f00";
                ctx.stroke();
                ctx.restore();
                ctx.restore();
                ctx.save();

                drawBlades(ctx, canvas.width, canvas.height, detector)
            }

         

            function drawBlades(ctx, x, y, detector) {
                let initialX = x / 3
                let initialY = y / 4
                let thick = 20
                let margin = 5
                let rotation = (90 - detector.angle) * Math.PI / 180
                let i = 0
                ctx.save();
                let canvas = document.getElementById("plano");
                let ctx2 = canvas.getContext("2d");
                ctx2.save();
                console.log("blade draw")
                
                //This loop is messing up at the 5th iteration
                for (; i < detector.blades.length; i++) {
                    ctx2.strokeStyle = "#000000";
                    ctx2.translate(initialX, initialY);
                    ctx2.rotate(rotation);
                    ctx2.strokeRect(0, 0, thick, y / 2);
                    ctx2.restore()
                    // this is the only variable in that changes of
                    // value in the loop
                    initialX = margin + thick + initialX
                }
                ctx2.save()
            }
        }
    }

    render() {
        return (
            <div className='sketch'>
                <canvas width="400" height="150" id="plano">
                   Canvas not compatible with your browser
                </canvas>
            </div>
        )
    }
};

Answer 1

您正在每次迭代中恢复上下文，但不保存它。

尝试添加ctx2.save()，它会起作用。

for (; i < detector.blades.length; i++) {
    ctx2.save(); // save the context
    ctx2.strokeStyle = "#000000";
    ctx2.translate(initialX, initialY);
    ctx2.rotate(rotation);
    ctx2.strokeRect(0, 0, thick, y / 2);
    ctx2.restore()
    // this is the only variable in that changes of
    // value in the loop
    initialX = margin + thick + initialX
}

在画布上画画，在旋转时做出奇怪的反应

1 个答案: