Clever Geek Handbook

JS fabric: how to transform a fabric image

How can I skew and scale left or right a fabric image inside a canvas using Fabric JS? I need it to keep track of how this monitor is displayed, so I can insert it as if it were displayed on the screen

enter image description here

+3


source to share


1 answer


Follow this link. You can set transform and skew as 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>
Run code


0


source






More articles:


All Articles