Fabric.js：高级

本文深入研究高级织物。

密钥概念：

>
• 织物组：有效地将多个对象作为一个单元管理，简化操作（移动，缩放，旋转）。>
帆布序列化（JSON）：
• 使用JSON保存和加载帆布状态，比图像格式更具带宽友好的方法。
自定义类创建：
• 扩展了具有定制的对象行为和属性的织物。 svg互操作性：
导出帆布元素向SVG，并将SVG内容导入帆布以获得格式的灵活性。
• 进行序列化方法：用于无缝的帆布状态恢复。
• >高级对象控制：通过子类别创建复杂的交互式元素和高度自定义的对象。 loadFromJSONloadFromSVG组：
• Fabric.js中的组允许将对象组合到一个实体中。 （见图1）。 可以分组任意数量的帆布对象，从而实现统一的操作。 可以进行缩放，旋转和修改组属性（颜色，透明，边界）。 织物在选择多个对象时隐含地创建组。

图1

编程组创建：

（结果见图2）。 使用>方法访问组中的单个对象。

图2

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

修改组对象：

item

（见图3）。除非指定坐标，否则组内的对象是相对于组中心的位置。 图3

创建一个水平对齐的组：

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

>

left（见图4）。 对于包含图像的组，请确保在分组之前将图像充分加载。top>

图4

组方法包括

，

，

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

，

，

，

，和。 在更新组尺寸时添加对象。 克隆现有的画布对象是必须在将它们添加到新组之前。

序列化：getObjectssize>

babric.js使用toObject>和toJSON进行序列化。 toJSON隐式调用toObject。

>

>示例：序列化一个空画布：

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

添加对象更新JSON表示。 toObject>返回非弦乐对象表示。 自定义对象序列化是通过覆盖或扩展toObject方法来实现的。

>示例：扩展

： toObject SVG序列化使用

>方法，将其委派给单个对象的

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

方法。 这允许导出到任何SVG兼容的渲染器。

> toSVG toSVG避难所：

> JSON的>和>

加载帆布状态。

和loadFromJSON从SVG数据加载。 loadFromDatalessJSON>通过引用外部SVG文件有效地处理大型路径数据。 loadSVGFromURLloadSVGFromString>子类别：loadFromDatalessJSON

> babric.js利用

进行子类。 属性充当构造函数。 调用父类方法。

>示例：创建一个自定义类：fabric.util.createClass initialize callSuper（有关

的示例，请参见图8和9）。 自定义属性应在

>和

>中处理。

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

>

>LabeledRect常见问题（常见问题解答）：toObject（所提供的常见问题解答已经结构良好且全面，因此这里不需要更改。）initialize>

根据要求包含图像，维护其原始格式和文本中的位置。

以上是Fabric.js：高级的详细内容。更多信息请关注PHP中文网其他相关文章！