반복없이 이미지로 easeljs의 도형을 채우는 방법은 무엇입니까?

Question

이 원형 사각형에 이미지를 채우고 싶습니다. 비트 맵 채우기를 사용하고 있습니다.

  var stage = new createjs.Stage("canvas"); 
      var layoutWidth = 0.8 * stage.canvas.width; 
      var layoutHeight = 0.6 * stage.canvas.height; 
      var layoutRect = new createjs.Shape(); 
      var image = new createjs.Bitmap("insta.png"); 
      image.image.onload=function(){ 
        layoutRect.graphics.beginStroke("black").beginBitmapFill(image.image).drawRoundRect((stage.canvas.width - layoutWidth)/2, (stage.canvas.height - layoutHeight)/2, layoutWidth, layoutHeight,20); 
        stage.update(); 
      } 
      stage.addChild(layoutRect); 
      stage.update(); 

하나의 이미지와 반복없이이 도형을 완전히 채우는 방법. 하나의 이미지가 도형의 전체 공간을 차지해야합니다.

Answer 1

채우기에 매트릭스 변환을 사용하여 이미지 채우기의 크기와 변환에 영향을 줄 수 있습니다. 당신이 가로 세로 비율을 유지하려면 http://jsfiddle.net/x0oqrkwv/

, 당신은 그렇게 논리를 추가해야합니다 : 여기

var m = new createjs.Matrix2D(); 
m.translate(x, y); 
m.scale(targetWidth/imageWidth, targetHeight/imageHeight); 
graphics.beginBitmapFill(img, "no-repeat", m); 

은 당신의 코드를 기반으로 샘플 바이올린입니다.