用KineticJS彈跳圖像球

Question

我剛剛開始使用KineticJS庫，並一直在玩它創造的形狀等。但是，我努力創建一個自定義的圈子與我自己的形象。我嘗試過使用fillPattern，但它根本沒有正確縮放/居中。我打算使用自己的圓形圖像還是使用矩形圖像，然後讓KineticJS處理事情？

只是爲了給出一點背景：我想要的是3個球彈跳，然後安頓就位。

歡迎任何建議。

Answer 1

排序它...所需的偏移值

  var ball = new Image(); 
      ball.src = 'ball2.jpg'; 
      ball.height = 230; 
      ball.width = 230; 

       var stage = new Kinetic.Stage({ 
        container: 'container', 
        width: 1000, 
        height: 1000 
       }); 

       var circle = new Kinetic.Circle({ 
        x: 300, 
        y: 300, 
        radius: 115, 
        fillPatternImage: ball, 
        fillPatternOffset :{ 
         x: -115, 
         y: -115 
        } 
       }); 

       var layer = new Kinetic.Layer(); 

       // add the shape to the layer 
       layer.add(circle); 

       // add the layer to the stage 
       stage.add(layer); 

       ball.onload = function() { 
        stage.draw(); 
       }