캔버스에서 이미지 패턴 재설정

Question

반복 옵션이 활성화 된 이미지로 사용자 정의 모양의 패스를 채 웁니다. 나는 그림을 그리며, 매우 멋지게 만든 다음, 사용자의 클릭으로 내 모양의 위치를 ​​변경하고 싶습니다. 나는 문맥을 깨끗하게하고 다른 곳에서는 내 길을 그립니다. 반복되는 이미지의 패턴은 그대로 유지됩니다. 사용자가 클릭을하면 아래 코드에서 볼 수 있듯이 createPattern()을 다시 호출하지만 그 호출은 새 패턴을 만들지 않고 이전 패턴을 사용합니다. 그리고 모양의 위치를 ​​변경했기 때문에, 처음의 그림을 그렸을 때 그 안의 어떤 부분이든 내부가 채워집니다.

어떻게 이미지 패턴을 재설정하여 이미지 채우기를 올바르게 시작할 수 있습니까? 가능한가? 컨텍스트. 변환 작업? 필자는 이미 번역하기 전에 컨텍스트를 번역하기 때문에 작품 번역은 생각하지 않습니다.

다음은 코드의 일부입니다. 좌표 변수는 중요하지 않다고 생각합니다.

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

예, 그렇게되었습니다. 당신은 내 코멘트를 볼 수있다