kinetic js와 함께 9 개의 인자를 가진 DrawImage

어떻게 Kinetics의 이미지 객체를 사용할 수 있습니까? 그러나 9 개의 인자를 가진 이미지를 그리는 데는 어떻게해야합니까? 사전에kinetic js와 함께 9 개의 인자를 가진 DrawImage

image = new Kinetic.Image({ 
    image: imageObj, 
    x: x, 
    y: y, 
    width: w, 
    height: h, 
    name: "image" 
});

덕분에 예를 들어 내 코드는 내가 이미지 객체에이 일을 조정할 수있는 방법을

ctx.drawImage(imageObj, x, y, w, h, canvasWidth, canvasHeight, w, h);

입니다.

출처

2012-09-05 novellino

자르기 속성을 사용하십시오.

ctx.drawImage(imageObj, x_crop, y_crop, w_crop, h_crop, x, y, w, h); 

<!-- is equivalent > 

var image = new Kinetic.Image({ 
    x: x, 
    y: y, 
    width: w, 
    height: h, 
    name: "image", 
    image: imageObj, 
    crop: [x_crop, y_crop, w_crop, h_crop] 
});

(단지 캔버스를 사용하여 다음 운동을 사용하여 같은 작물) 아래의 예를보십시오 :

<!DOCTYPE html> 
<html> 
    <head> 

    </head> 

    <body> 
     <p>Image to use:</p> 
     <img id="yoda" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" alt="yoda" width="213" height="236" /> 

     <p>Canvas:</p> 
     <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"> 
     Your browser does not support the HTML5 canvas tag. 
     </canvas> 

     <p>Kineticjs:</p> 
     <div id="container" style="border:1px solid #d3d3d3; width:300px; height: 300px"></div> 

     <script src="kinetic-v3.10.5.js"></script> 
     <script> 
      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      var img=document.getElementById("yoda"); 
      ctx.drawImage(img, 40, 30, 90, 90, 10, 10, 90, 90); 

      var stage = new Kinetic.Stage({ 
       container: "container", 
       width: 250, 
       height: 300 
      }); 

      var layer = new Kinetic.Layer(); 
      var imageObj = new Image(); 

      imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"; 
      var image = new Kinetic.Image({ 
       x: 10, 
       y: 10, 
       width: 90, 
       height: 90, 
       name: "image", 
       image: imageObj, 
       crop: [40, 30, 90, 90] 
      }); 

      layer.add(image); 
      stage.add(layer); 

     </script> 
    </body> 
</html>

출처

2012-09-05 13:14:18 maiconio

덕분에 당신이 내 일 저장을 많이! – novellino

kinetic js와 함께 9 개의 인자를 가진 DrawImage

답변

관련 문제