面料JS：如何變換面料圖像

Question

如何使用面料JS歪斜和縮放帆布內的面料圖像？ 我需要它遵循正在顯示該監視器，所以我可以粘貼它喜歡它是 屏幕

Answer 1

請通過this鏈接上顯示的方式。您可以設置轉換和扭曲爲Fiddle

var canvas = new fabric.Canvas('canvas'); 
 

 

 

 
fabric.Image.fromURL("https://www.google.co.in/images/srpr/logo11w.png", function(img) { 
 
    img.set({transformMatrix: [1, .30, 0, 1, 0, 0],width:200,height:50,top:100,left:150}); 
 
    img.setCoords(); 
 
    canvas.add(img); 
 
    
 
    canvas.renderAll(); 
 
    })

body { 
 
    background-color: ivory; 
 
    padding:30px; 
 
} 
 
canvas { 
 
    border: 1px solid red; 
 
}

<h3>FabricJS: using transformMatrix to skew-Y</h3> 
 

 
<canvas id="canvas" width="300" height="300"></canvas>