PaperJS의 경로에 이미지를 추가하는 방법

Question

http://paperjs.org/examples/candy-crash/의 멋진 코드로 놀고 있습니다. 색상을 이미지로 대체하여 빨간색 원을 표시하는 대신 내부에 이미지가있는 원을 표시해야합니다. 다음은 수정할 필요가있는 부분입니다.

function Ball(r, p, v) { 
    this.radius = r; 
    this.point = p; 
    this.vector = v; 
    this.maxVec = 15; 
    this.numSegment = Math.floor(r/3 + 2); 
    this.boundOffset = []; 
    this.boundOffsetBuff = []; 
    this.sidePoints = []; 
    this.path = new Path({ 
     fillColor: { 
      hue: Math.random() * 360, 
      saturation: 1, 
      brightness: 1 
     }, 
     blendMode: 'screen' 
    }); 

    for (var i = 0; i < this.numSegment; i ++) { 
     this.boundOffset.push(this.radius); 
     this.boundOffsetBuff.push(this.radius); 
     this.path.add(new Point()); 
     this.sidePoints.push(new Point({ 
      angle: 360/this.numSegment * i, 
      length: 1 
     })); 
    } 
} 

래스터에서 읽는 중입니다. 그러나이 이미지를 얻는 방법을 모르겠습니다. code. 어떤 도움을 주셔서 감사합니다.

만약 내가 단순히 this.path = new Path(raster)을하면 제대로 작동하지 않습니다. 주변을 돌아 다니는 모든 원과 반대로 하나의 정지 이미지 만 보여줍니다. 다음은 UPDATE

당신이 path와 raster 클립하려는 경우 래스터, 당신은 두 객체를 포함하는 그룹을 만들 필요가

var imgUrl ="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg"; 
var raster = new Raster(); 
raster.scale(0.2) 

Answer 1

을 사용하는 것입니다 다음 group.clipped 속성을 설정 ~ true. raster을 path 생성자의 인수로 전달하면 작동하지 않습니다.

"main"루프에서이 작업을하는 것이 가장 쉽습니다.

//--------------------- main --------------------- 

var balls = []; 

// ADD AN ARRAY TO HOLD SOME RASTERS 

var rasters = []; 
var raster = new Raster("http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg"); 
raster.scale(.05); 
var numBalls = 18; 
for (var i = 0; i < numBalls; i++) { 
    var position = Point.random() * view.size; 
    var vector = new Point({ 
     angle: 360 * Math.random(), 
     length: Math.random() * 10 
    }); 
    var radius = Math.random() * 60 + 60; 
    balls.push(new Ball(radius, position, vector)); 

    // ADD RASTERS AND CLIP TO EACH "BALL" 

    rasters.push(raster.clone().scale(radius/50)); 
    var group = new Group(balls[i].path, rasters[i]); 
    group.clipped = true; 
} 
raster.remove(); 

function onFrame() { 
    for (var i = 0; i < balls.length - 1; i++) { 
     for (var j = i + 1; j < balls.length; j++) { 
      balls[i].react(balls[j]); 
     } 
    } 
    for (var i = 0, l = balls.length; i < l; i++) { 
     balls[i].iterate(); 
     rasters[i].position = balls[i].path.position; 
    } 
}