Question

我正在使用图像填充自定义形状的路径，并启用重复选项。我做了一个非常好的绘图，然后用户点击我希望我的形状的位置改变。我清除了背景，然后在其他地方画出我的道路，一切都正确;但图像的重复图案保持不变。当用户进行点击时，我再次调用createPattern（），如下面的代码所示，但该调用不会创建新模式，而是使用旧模式。因为我改变了形状的位置，所以当我进行初始绘制时，它的内部充满了图像的任何部分。

那么如何重置图像模式，以便正确地开始在其他地方填充图像？可能吗？ context.translate会工作吗？我认为翻译不起作用，因为我已经在填写之前翻译了上下文。

这是代码的一部分。我认为坐标变量并不重要：

    updatePicture(){ // called each time the user clicks, and should draw in different positions

...
    context.save();
    context.translate(x, y);
    context.rotate(270 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);

    context.beginPath();
    context.moveTo(0 - (tablo.height / scale_cerceve) - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - (tablo.height / scale_cerceve) - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + paspartu_height, 0 - paspartu_height);
    context.closePath();
    var cercevePattern = context.createPattern(cerceve, "repeat");
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // 
    context.save();
    context.translate(x, y + tablo.height);
    context.rotate(180 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 + paspartu_height, 0 - paspartu_height);
    context.lineTo(0 + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 - (tablo.width / scale_cerceve) - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 - (tablo.width / scale_cerceve) - paspartu_height, 0 - paspartu_height);
    context.closePath();
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // 
    context.save();
    context.translate(x, y);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + (tablo.width / scale_cerceve) + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo((tablo.width / scale_cerceve) + paspartu_height, 0 - paspartu_height);
    context.closePath();
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // t
    context.save();
    context.translate(x + tablo.width, y);
    context.rotate(90 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
context.lineTo(0 + (tablo.height / scale_cerceve) + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
context.lineTo(0 + (tablo.height / scale_cerceve) + paspartu_height, 0 - paspartu_height);
context.closePath();
context.fillStyle = cercevePattern;
context.fill();
context.restore();

...
}

Answer 1

是的，这就是它的完成方式。你可以看到我的评论

在画布中重置图像模式

1 个答案: