fabric.js 中originX originY center设置问题

在最开始一直对fabric中的originX和originY很迷,设置center属性是怎么的一个中心对齐方式,为什么一个组里, 有一个设置了center,其他的都会连带呢?

于是自己就进行代表探索

 // 左侧组:只有蓝色圆设置center origin
var circle_left = new this.$fabric.Circle({
  radius: 80,
  fill: 'pink',
});
var circle1_left = new this.$fabric.Circle({
  radius: 60,
  fill: 'blue',
  originX: 'center',  // 只有这个设置了center
  originY: 'center',
});
var text_left = new this.$fabric.Text('蓝圆center', {
  fontSize: 16,
});

var group_left = new this.$fabric.Group([circle_left, circle1_left, text_left], {
  left: 150,
  top: 150,
});
this.canvas.add(group_left);

在这里插入图片描述
在组当中是这样的效果
最形象的解释是:
1. 默认对象(左上角对齐):

  • 就像把一本书的左上角贴在桌子的左上角
  • 书的其他部分自然延伸到右边和下面

2. 设置了center的对象(中心点对齐):

  • 就像把一本书的中心点贴在桌子的左上角
  • 书的左上角就会跑到桌子的外面(左上方向)
    在这里插入图片描述
    在这里插入图片描述
    个人认为,第一个元素设置了center,其余元素都会以这个center元素为准,之后的元素设置center都会把圆心向最先的center元素中心对齐。

在这里插入图片描述

在使用 Fabric.js 绘制箭头时,可以通过组合不同的图形元素来实现。通常,箭头由一条直线(折线)和一个三角形(箭头尖)组成。Fabric.js 提供了 `fabric.Line` 和 `fabric.Triangle` 这两个类,可以分别用来绘制直线和箭头尖。 ### 绘制箭头的基本步骤 1. **定义箭头的起点和终点**:确定箭头的起点和终点坐标。 2. **计算箭头尖的方向和位置**:根据起点和终点的位置,计算箭头尖的位置和旋转角度。 3. **绘制直线**:使用 `fabric.Line` 绘制从起点到接近终点的直线。 4. **绘制箭头尖**:使用 `fabric.Triangle` 绘制一个三角形,并根据箭头的方向进行旋转和定位。 ### 示例代码 以下是一个完整的示例代码,演示如何使用 Fabric.js 绘制一个带有箭头的直线: ```javascript // 创建 Fabric.js 画布 const canvas = new fabric.Canvas('canvas'); // 定义箭头的起点和终点 const startPoint = { x: 100, y: 100 }; const endPoint = { x: 300, y: 300 }; // 计算箭头尖的三角形大小 const arrowSize = 10; // 计算箭头尖的方向 const dx = endPoint.x - startPoint.x; const dy = endPoint.y - startPoint.y; const angle = Math.atan2(dy, dx); // 计算箭头尖的位置 const arrowX = endPoint.x - arrowSize * Math.cos(angle); const arrowY = endPoint.y - arrowSize * Math.sin(angle); // 绘制直线 const line = new fabric.Line([startPoint.x, startPoint.y, arrowX, arrowY], { stroke: 'black', strokeWidth: 2, selectable: false, hasControls: false }); // 绘制箭头尖(三角形) const arrowHead = new fabric.Triangle({ width: arrowSize * 2, height: arrowSize * 2, left: arrowX, top: arrowY, fill: 'black', originX: 'center', originY: 'center', angle: (angle * 180) / Math.PI, // 将弧度转换为角度 selectable: false, hasControls: false }); // 将直线和箭头尖添加到画布中 canvas.add(line, arrowHead); ``` ### 代码说明 - **`fabric.Line`**:用于绘制从起点到接近终点的直线,终点位置会稍微缩短,以留出箭头尖的空间。 - **`fabric.Triangle`**:用于绘制箭头尖,通过设置 `originX` 和 `originY` 为 `'center'`,可以确保三角形以中心点为基准进行旋转。 - **角度计算**:通过 `Math.atan2(dy, dx)` 计算箭头的方向,并将该角度转换为 `fabric.Triangle` 的 `angle` 属性。 ### 效果 运行上述代码后,画布上会显示一条从起点到终点的直线,并在终点处显示一个指向终点的箭头尖。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值