html - Fabric JS : How to Transform Fabric Image

标签 html canvas javascript fabricjs

如何使用 Fabric JS 在 Canvas 中向左或向右倾斜和缩放 Fabric 图像? 我需要它遵循此监视器的显示方式,以便我可以按原样粘贴它 显示在屏幕上

enter image description here

最佳答案

请通过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>

关于html - Fabric JS : How to Transform Fabric Image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14485716/

相关文章:

javascript - image.Onload 没有完成图像

javascript - 如何使 MathJax 在此脚本中正确渲染?

html - 当元素内部有一个类时如何忽略body元素样式

javascript - 在一个图像上定义多个点击区域

javascript - Canvas drawImage 将我的正方形图像缩放为矩形

javascript - 参数可以从 Rails 应用程序 Controller 传递到 Javascript 中吗?

javascript - 将货币格式转换为数字

javascript - 如何根据条件更改文本颜色?

javascript - 为什么 jQuery .html(string) 将 type 属性移到输入的末尾?

seo - HTML 中的安全隐藏文本?