📅 最后修改于: 2023-12-03 15:30:43.817000 🧑 作者: Mango
Fabric.js 椭圆类完整参考
介绍
Fabric.js 是一个优秀的 HTML5 canvas 库，提供了丰富的 API，可以用来绘制图形、添加事件等等。其中，椭圆类是 Fabric.js 的一种图形类，用来绘制椭圆形。
本文将介绍 Fabric.js 椭圆类的基本使用方法，并详细列举每个属性和方法的作用及参数含义，以便程序员能够更方便的使用 Fabric.js。
基本用法
// 创建椭圆对象
var ellipse = new fabric.Ellipse({
left: 100, // 椭圆左边距
top: 100, // 椭圆上边距
rx: 50, // 椭圆 X 半径
ry: 70, // 椭圆 Y 半径
fill: '#f00' // 填充色
});
// 将椭圆添加到 canvas 中
canvas.add(ellipse);
属性
● rx
- 类型：Number
- 默认值：0
- 描述：椭圆 X 半径
● ry
- 类型：Number
- 默认值：0
- 描述：椭圆 Y 半径
● fill
- 类型：String
- 默认值：'' (空字符串)
- 描述：填充色。可以为颜色名称、十六进制颜色码、rgb()、rgba()、hsl() 或 hsla() 格式字符串。
● stroke
- 类型：String
- 默认值：'' (空字符串)
- 描述：描边色。可以为颜色名称、十六进制颜色码、rgb()、rgba()、hsl() 或 hsla() 格式字符串。
● strokeWidth
- 类型：Number
- 默认值：1
- 描述：描边宽度。单位为像素(px)。
● strokeLineCap
- 类型：String
- 默认值：'butt'
- 描述：描边线帽样式。可选值为 'butt'、'round' 或 'square'。
● strokeLineJoin
- 类型：String
- 默认值：'miter'
- 描述：描边线段连接样式。可选值为 'miter'、'round' 或 'bevel'。
● strokeMiterLimit
- 类型：Number
- 默认值：4
- 描述：描边斜角长度。仅当 strokeLineJoin 为 'miter' 时有效。
● shadow
● originX
- 类型：String
- 默认值：'left'
- 描述：椭圆 X 原点位置。可选值为 'left'、'right' 或 'center'。
● originY
- 类型：String
- 默认值：'top'
- 描述：椭圆 Y 原点位置。可选值为 'top'、'bottom' 或 'center'。
● angle
- 类型：Number
- 默认值：0
- 描述：椭圆旋转角度。单位为度数。
● flipX
- 类型：Boolean
- 默认值：false
- 描述：椭圆在 X 轴上是否翻转。
● flipY
- 类型：Boolean
- 默认值：false
- 描述：椭圆在 Y 轴上是否翻转。
● opacity
- 类型：Number
- 默认值：1
- 描述：透明度。取值范围为 0 到 1，0 表示完全透明，1 表示不透明。
● selectable
- 类型：Boolean
- 默认值：true
- 描述：是否可以被选中。
● hasControls
- 类型：Boolean
- 默认值：true
- 描述：是否允许控制点操作。
● hasBorders
- 类型：Boolean
- 默认值：true
- 描述：是否允许边框操作。
● hasRotatingPoint
- 类型：Boolean
- 默认值：true
- 描述：是否允许旋转操作。
● lockMovementX
- 类型：Boolean
- 默认值：false
- 描述：是否禁止在 X 轴上移动。
● lockMovementY
- 类型：Boolean
- 默认值：false
- 描述：是否禁止在 Y 轴上移动。
● lockRotation
- 类型：Boolean
- 默认值：false
- 描述：是否禁止旋转。
● lockScalingX
- 类型：Boolean
- 默认值：false
- 描述：是否禁止在 X 轴上缩放。
● lockScalingY
- 类型：Boolean
- 默认值：false
- 描述：是否禁止在 Y 轴上缩放。
● lockUniScaling
- 类型：Boolean
- 默认值：false
- 描述：是否禁止在等比缩放。
● perPixelTargetFind
- 类型：Boolean
- 默认值：false
- 描述：是否启用像素级目标查找。
● targetFindTolerance
- 类型：Number
- 默认值：0
- 描述：目标查找容差值。单位为像素(px)。
● hoverCursor
- 类型：String
- 默认值：'move'
- 描述：鼠标悬浮时的光标样式。
● moveCursor
- 类型：String
- 默认值：'move'
- 描述：鼠标移动时的光标样式。
● padding
- 类型：Number
- 默认值：0
- 描述：内边距。用于定位控制点。
● borderColor
- 类型：String
- 默认值：'' (空字符串)
- 描述：边框颜色。可以为颜色名称、十六进制颜色码、rgb()、rgba()、hsl() 或 hsla() 格式字符串。
● borderScaleFactor
- 类型：Number
- 默认值：1
- 描述：缩放边框的比例因子。
● borderOpacityWhenMoving
- 类型：Number
- 默认值：0.4
- 描述：移动时边框颜色的透明度。
● centeredRotation
- 类型：Boolean
- 默认值：true
- 描述：是否以中心点旋转。如果为 true，则旋转将以中心点为基准。如果为 false，则旋转将以左上角为基准。
● centeredScaling
- 类型：Boolean
- 默认值：false
- 描述：是否以中心点等比缩放。如果为 true，则等比缩放将以中心点为基准。如果为 false，则等比缩放将以左上角为基准。
● fillRule
- 类型：String
- 默认值：'nonzero'
- 描述：填充规则。可选值为 'nonzero' 或 'evenodd'。
● globalCompositeOperation
- 类型：String
- 默认值：null
- 描述：全局组合模式。可以为源图像与目标图像进行特定的组合，例如取交集、取并集、取补集等。
方法
● toObject()
将椭圆对象转换成 JSON 对象。
var json = ellipse.toObject();
● toSVG()
将椭圆对象转换成 SVG 字符串。
var svg = ellipse.toSVG();
● setWidth(value, options)
设置椭圆宽度。
- 参数 value：宽度值。
- 参数 options：配置对象。可包含 originX、strokeWidth、lockScalingX 和 lockScalingY 四个属性。用来设置椭圆 X 原点位置、描边宽度、是否禁止在 X 轴上、Y 轴上缩放。
ellipse.setWidth(100, {
originX: 'center', // 设置 X 原点位置为中心
strokeWidth: 3, // 设置描边宽度为 3px
lockScalingX: true, // 禁止在 X 轴上缩放
lockScalingY: false // 允许在 Y 轴上缩放
});
● setHeight(value, options)
设置椭圆高度。
- 参数 value：高度值。
- 参数 options：配置对象。可包含 originY、strokeWidth、lockScalingX 和 lockScalingY 四个属性。用来设置椭圆 Y 原点位置、描边宽度、是否禁止在 X 轴上、Y 轴上缩放。
ellipse.setHeight(150, {
originY: 'bottom', // 设置 Y 原点位置为底部
strokeWidth: 5, // 设置描边宽度为 5px
lockScalingX: false, // 允许在 X 轴上缩放
lockScalingY: true // 禁止在 Y 轴上缩放
});
● getBoundingRect()
获取椭圆的边框矩形。
var rect = ellipse.getBoundingRect();
● toClipPath()
转换成裁剪路径对象。
var clipPath = ellipse.toClipPath();
结束语
本文介绍了 Fabric.js 椭圆类的基本使用方法，并详细列举了每个属性和方法的作用及参数含义。希望能对工作中的程序员有所帮助。如有疑问或错误欢迎指正。