0

繰り返しオプションを有効にして、カスタム形状のパスを画像で埋めています。私は非常に素晴らしい絵を描き、ユーザーからのクリックで私の形の位置を変えたいと思っています。コンテキストをクリアし、別の場所にパスを描画します。すべて正しいです。しかし、画像の繰り返しパターンは同じままです。ユーザーがクリックすると、以下のコードに示すように 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();

...
}
4

1 に答える 1

0

ええ、それはそれが行われている方法です。あなたは私のコメントを見ることができます

于 2012-10-07T11:57:19.587 に答える