如何解决用aCoords tl,br 角而不是顶部绘制矩形,留在fabric.js 中?
所以我想根据从外部系统接收到的坐标在画布上绘制矩形,该系统使用 (x1,y1)(左上角)和(x2,y2)(右下角)坐标绘制矩形,而在 Fabric 中.js 它有点不同,例如使用 top 和 left 属性,我尝试使用 aCoords 并编写了以下代码:
addRect() {
let square = new fabric.Rect({
stroke: 'yellow',noScaleCache: false,strokeWidth: 10,strokeUniform: true,fill: 'rgba(0,0.2)',flipX: true,});
console.log(square.getCoords());
square.set("aCoords",{ tl: new fabric.Point(100,2),br: new fabric.Point(1,tr: new fabric.Point(1,bl: new fabric.Point(1,2) });
this.canvas.add(square);
}
这似乎不起作用,我错过了什么?
解决方法
虽然通过阅读 fabricjs.com 的 API 参考并不确定,但在对代码进行了一点挖掘之后,我几乎可以肯定 aCoords
只是作为一个吸气剂。因此,您无法使用此属性修改形状外观。
相反,您单独更新了 top
、left
、width
和 height
属性。
这是一个例子:
(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
let square = new fabric.Rect({
stroke: 'yellow',noScaleCache: false,strokeWidth: 10,strokeUniform: true,fill: 'rgba(0,0.2)',flipX: true,});
canvas.add(square);
let x1 = 5;
let y1 = 25;
let x2 = 105;
let y2 = 55;
square.set("top",y1);
square.set("left",x1);
square.set("width",(x2 - x1));
square.set("height",(y2 - y1));
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js "></script>
<canvas id="c"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。