在画布中重置图像模式

我正在用图像填充自定义形状路径，并启用重复选项。我做了一个绘图，非常好，然后用户点击一下，我希望我的形状位置发生变化。我清楚了上下文，然后在其他地方绘制我的路径，都是正确的;但图像的重复模式保持不变。当用户点击时，我再次调用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(); 

... 
}

来源

2012-10-03 Halo

我想我明白了，但还没有尝试过。我想我应该把背景转换到我要开始的路径的确切位置，然后可能会希望它会根据新的模式填充图像。对于相关的问题，http://stackoverflow.com/questions/7698949/moving-the-start-position-of-canvas-pattern – Halo

是的，就是这么做的。你可以看到我的评论

来源

2012-10-07 11:57:19 Halo

在画布中重置图像模式

回答

相关问题