来源:未知 时间:2022-07-03 21:51 作者:小飞侠 阅读:次
[导读] Fabric.js 简介。 第 3 部分。 我们已经在本系列的第一 部分和 第二 部分中 介绍了大部分基础知识。 让我们继续更高级的东西! 团体 我们首先要讨论的是组。 组是 Fabric 最强大的功能之...
Fabric.js 简介。第 3 部分。我们已经在本系列的第一部分和第二部分中介绍了大部分基础知识。让我们继续更高级的东西! 团体我们首先要讨论的是组。组是 Fabric 最强大的功能之一。它们正是它们听起来的样子——一种将任何 Fabric 对象组合成单个实体的简单方法。我们为什么要这样做?当然,要能够将这些对象作为一个单元来工作! 还记得如何用鼠标将画布上的任意数量的 Fabric 对象分组,形成一个单一的选择吗?分组后,所有对象都可以移动,甚至可以一起修改。他们组成一个群体。我们可以缩放、旋转,甚至改变它的表现属性——颜色、透明度、边框等。 这正是组的用途,每次您在画布上看到这样的选择时,Fabric 都会在幕后隐式创建一组对象。只有以编程方式提供与组合作的访问权限才有意义。这是 让我们创建一组 2 个对象,圆形和文本: var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5, originX: 'center', originY: 'center' }); var text = new fabric.Text('hello world', { fontSize: 30, originX: 'center', originY: 'center' }); var group = new fabric.Group([ circle, text ], { left: 150, top: 100, angle: -10 }); canvas.add(组); 首先,我们创建了一个“hello world”文本对象。Setting 瞧!您会在画布上看到一个对象,它看起来像一个带标签的椭圆。请注意,为了修改该对象,我们只需更改组的属性,为其提供自定义左侧、顶部和角度值。您现在可以将此对象作为单个实体使用。 现在我们在画布上有一个组,让我们稍微改变一下: // 为了使用 setFill 命名的 setter,您需要添加可选的命名 setter/getter // 来自 src/util/named_accessors.mixins.js 的代码group.item(0).set('fill', 'red') ; group.item(1).set({ text: 'trololo', fill: 'white' }); 这里发生了什么?我们通过 您现在可能已经注意到的一件重要的事情是,组中的对象都相对于组的中心定位。当我们更改文本对象的文本时,即使更改了它的宽度,它也保持居中。如果您不想要这种行为,您需要指定对象的左/上坐标。在这种情况下,它们将根据这些坐标组合在一起。 让我们创建并分组 3 个圆圈,使它们一个接一个地水平放置: 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(组); 使用组时要记住的另一件事是对象的状态。例如,当用图像组成一个组时,您需要确保这些图像已完全加载。由于 Fabric 已经提供了确保加载图像的辅助方法,因此这变得相当容易: fabric.Image.fromURL('/assets/pug.jpg', function(img) { var img1 = img.scale(0.1).set({ left: 100, top: 100 }); fabric.Image.fromURL(' /assets/pug.jpg', function(img) { var img2 = img.scale(0.1).set({ left: 175, top: 175 }); fabric.Image.fromURL('/assets/pug.jpg' , 函数(img){ var img3 = img.scale(0.1).set({ left: 250, top: 250 }); canvas.add(new fabric.Group([ img1, img2, img3], { left: 200 , 顶部: 200 })) }); }); }); 那么在与组合作时还有哪些其他方法可用?有一个方法,它的工作原理与返回一个组中所有对象的数组 您可以通过 2 种方式从组中添加/删除对象 - 更新组尺寸/位置和不更新。我们建议使用更新尺寸,除非您正在执行批量操作并且在此过程中您对组的宽度/高度错误没有任何问题 在组的中心添加矩形: group.add(new fabric.Rect({ ... originX: 'center', originY: 'center' })); 要添加距离组中心 100px 的矩形: group.add(new fabric.Rect({ ... left: 100, top: 100, originX: 'center', originY: 'center' })); 要在组的中心添加矩形并更新组的尺寸: group.addWithUpdate(new fabric.Rect({ ... left: group.get('left'), top: group.get('top'), originX: 'center', originY: 'center' })); 要在距离组中心 100 像素处添加矩形并更新组的尺寸: group.addWithUpdate(new fabric.Rect({ ... left: group.get('left') + 100, top: group.get('top') + 100, originX: 'center', originY: 'center' })); 最后,如果你想用画布上已经存在的对象创建一个组,你需要先克隆它们: // 创建一个包含现有 (2) 个对象副本的组var group = new fabric.Group([ canvas.item(0).clone(), canvas.item(1).clone() ]); // 移除所有对象并重新渲染canvas.clear().renderAll(); // 添加组到画布canvas.add(group); 序列化一旦您开始构建某种有状态的应用程序,可能允许用户将画布内容的结果保存在服务器上,或者将内容流式传输到不同的客户端,您就需要画布序列化。你还怎么发送画布内容?当然,总是可以选择将画布导出到图像,但是将图像上传到服务器肯定会占用大量带宽。在大小方面没有什么比文本更好的了,这正是 Fabric 为画布序列化/反序列化提供出色支持的原因。 toObject, toJSONFabric 中画布序列化的支柱是 var canvas = new fabric.Canvas('c'); JSON.stringify(画布); // '{"objects":[],"background":"rgba(0, 0, 0, 0)"}' 我们正在使用ES5 注意表示空画布的返回字符串。它采用 JSON 格式,基本上由“对象”和“背景”属性组成。“对象”当前为空,因为画布上没有任何内容,并且背景具有默认的透明值(“rgba(0, 0, 0, 0)”)。 让我们给画布不同的背景,看看事情是如何变化的: canvas.backgroundColor = '红色'; JSON.stringify(画布); // '{"objects":[],"background":"red"}' 正如人们所期望的那样,画布表示现在反映了新的背景颜色。现在,让我们添加一些对象! canvas.add(new fabric.Rect({ left: 50, top: 50, height: 20, width: 20, fill: 'green' })); console.log(JSON.stringify(canvas)); ..记录的输出是: '{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill ":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":假,"不透明度":1,"可选择":真,"hasControls":真,"hasBorders":真,"hasRotatingPoint":假,"透明角":真,"perPixelTargetFind":假,"rx":0, "ry":0}],"背景":"rgba(0, 0, 0, 0)"}' 哇。乍一看,变化很大,但仔细观察,我们发现它是新添加的对象,现在是“对象”数组的一部分,序列化为 JSON。请注意,它的表示如何包括其所有的视觉特征——左、上、宽、高、填充、描边等等。 如果我们要添加另一个对象——比如说,一个位于矩形旁边的红色圆圈,你会看到表示相应地发生了变化: canvas.add(new fabric.Circle({ left: 100, top: 100, radius: 50, fill: 'red' })); console.log(JSON.stringify(canvas)); ..记录的输出是: '{"objects":[{ "type":"rect" ,"left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill ":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":假,"不透明度":1,"可选择":真,"hasControls":真,"hasBorders":真,"hasRotatingPoint":假,"透明角":真,"perPixelTargetFind":假,"rx":0, "ry":0},{ "type":"circle" ,"left":100,"top":100,"width":100,"height":100,"fill":"red", "overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY ":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius": 50}],"背景":"rgba(0, 0, 0, 0)"}'hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}'hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}' 我突出显示 数据:图像/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAK8CAYAAAAXo9vkAAAgAElEQVR4Xu3dP4xtBbnG4WPAQOQ2YBCLK1qpoQE1/m+NVlCDwUACicRCEuysrOwkwcJgAglEItRQaWz9HxEaolSKtxCJ0FwMRIj32zqFcjm8e868s2fNWo/Jygl+e397rWetk5xf5pyZd13wPwIECBAgQIAAAQIECBxI4F0H+AgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECyw+Qb134R/U2fevC8q+5esGWESBAgAABAgQIEFiOwPL/MC5AlvO0OBMCBAgQIECAAAECJxQQICcE9HYCBAgQIECAAAECBPYXECD7W3klAQIECBAgQIAAAQInFBAgJwT0dgIECBAgQIAAAQIE9hcQIPtbeSUBAgQIECBAgAABAicUECAnBPR2AgQIECBAgAABAgT2FxAg+1t5JQECBAgQIECAAAECJxQQICcE9HYCBAgQIECAAAECBPYXECD7W3klAQIECBAgQIAAAQInFBAgJwTc9+3z49yvmNd+dI7PzPHJOW6Y4wNzXD3HlXNc9pZdb85/vzbHK3P8aY7n5vj1HL+Y43dz417f97O9jgABAgQIECBAgMBSBATIKd2JCY5dWNwyx5fn+PwcV5U/6tXZ99M5fjjHk3Mjd6HifwQIECBAgAABAgQWLSBAirdnouP6WXfvHHfOcU1x9T6rXp4XPTLHA3NTX9jnDV5DgAABAgQIECBA4NACAuSE4hMdl8+Kr83xzTmuO+G61ttfnEXfnuN7c4PfaC21hwABAgQIECBAgMBJBQTIJQpOeFw7b71/jtsvccWh3vbYfNB9c6NfOtQH+hwCBAgQIECAAAECFxMQIMd8No7C4+F5283HfOtZv/ypOYG7hMhZ3wafT4AAAQIECBDYtoAA2fP+H/1Vqwd3f4jf8y1Lfdkunu7xV7OWenucFwECBAgQIEBg3QICZI/7O/Fxx7xs9wf3t36r3D3evciX7L7F7+6rIY8u8uyc ...还有17000 个字符。 您可能想知道为什么还有 {“背景”:“rgba(0,0,0,0)”, “对象”:[ { “角度”:0, “填充”:“绿色”, “flipX”:假, “flipY”:假, “hasBorders”:true, “hasControls”:true, “hasRotatingPoint”:false, “height”:20, “left”:50, “opacity”:1, “overlayFill”:null, “perPixelTargetFind”:false, “scaleX " : 1, "scaleY" : 1, "selectable" : true, "stroke" :空, “strokeDashArray”:空, “strokeWidth”:1, “top”:50, “transparentCorners”:true, “类型”:“矩形”, “宽度”:20 } ] } 如您所见, 这意味着当您创建自己的“类”,或者只需要自定义对象的序列化表示时,您需要做的就是使用 var rect = new fabric.Rect(); rect.toObject = function() { return { name: 'trololo' }; }; 画布.添加(矩形);console.log(JSON.stringify(canvas)); ..记录的输出是: '{"objects":[{"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}' 如您所见,objects 数组现在具有我们矩形的自定义表示。这种覆盖可能不是很有用——尽管提出了要点——所以我们不如用额外的属性来扩展矩形的方法。 var rect = new fabric.Rect(); rect.toObject = (function(toObject) { return function() { return fabric.util.object.extend(toObject.call(this), { name: this.name }); }; })(rect.toObject); 画布.添加(矩形);rect.name = 'trololo'; console.log(JSON.stringify(canvas)); ..记录的输出是: '{"objects":[{"type":"rect","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0 ,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX" :false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false ,"rx":0,"ry":0, "name":"trololo" }],"background":"rgba(0, 0, 0, 0)"}' 我们使用附加属性“名称”扩展了对象的现有 您可以将对象标记为不可导出 到SVG另一种有效的基于文本的画布表示是 SVG 格式。由于 Fabric 专注于在画布上解析和渲染 SVG,因此只有将其设为双向过程并提供画布到 SVG 的转换才有意义。让我们在画布上添加相同的矩形,看看方法返回了什么样的表示 canvas.add(new fabric.Rect({ left: 50, top: 50, height: 20, width: 20, fill: 'green' })); console.log(canvas.toSVG()); ..记录的输出是: '<?xml version="1.0" Standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/ REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink " version="1.1" width="800" height="700" xml:space="preserve"><desc>使用 Fabric.js 0.9.21 创建</desc><rect x="-10" y=" -10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="翻译(50 50)" /></svg>' 就像 与 Fabric 的专有 反序列化,SVG解析器与序列化类似,有两种方法可以从字符串加载画布:从 JSON 表示形式或从 SVG 加载。使用 JSON 表示时,有 请注意,前 2 个方法是实例方法,直接在画布实例上调用,而后两种方法是静态方法,在“结构”对象而不是画布上调用。 这些方法没什么好说的。它们完全按照您的预期工作。例如,让我们从画布中获取先前的 JSON 输出并将其加载到干净的画布上: var canvas = new fabric.Canvas(); canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green ","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false, "flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx ":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100," ..两个对象“神奇地”出现在画布上: 所以从字符串加载画布非常容易。但是那种看起来很奇怪的 .. {"objects":[{"type":"path","left":184,"top":177,"width":175,"height":151,"fill":"#231F20","overlayFill ":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":-19,"flipX":false,"flipY" :false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"path":[ ["M",39.502,61.823],["c",-1.235,-0.902,-3.038,-3.605,-3.038,-3.605],["s",0.702,0.4,3.907,1.203],[" c",3.205,0.8,7.444,-0.668,10.114,-1.97],["c",2.671,-1.302,7.11,-1.436,9。448,-1.336],["c",2.336,0.101,4.707,0.602,4.373,2.036],["c",-0.334,1.437,-5.742,3.94,-5.742,3.94],["s", 0.4,0.334,1.236,0.334],["c",0.833,0,6.075,-1.403,6.542,-4.173],["s",-1.802,-8.377,-3.272,-9.013],["c ",-1.468,-0.633,-4.172,0,-4.172,0],["c",4.039,1.438,4.941,6.176,4.941,6.176],["c",-2.604,-1.504,-9.279 ,-1.234,-12.619,0.501],["c",-3.337,1.736,-8.379,2.67,-10.083,2.503],["c",-1.701,-0.167,-3.571,-1.036,-3.571 ,-1.036],["c",1.837,0.034,3.239,-2.669,3.239,-2.669],["s",-2.068,2.269,-5.542,0.434],["c",-3.47,- 1.837,-1.704,-8.18,-1.704,-8.18],["s",-2.937,5.909,-1,9.816],["C",34.496,60.688,39.502,61.823,39.502,61.823],[ "z"],["M",77.002,40.772],["c",0,0,-1.78,-5.03,-2.804,-8.546],["l",-1.557,8.411],["l",1.646,1.602],["c",0,0,0,-0.622,-0.668,-1.691],["C",72.952,39.48 ,76.513,40.371,77.002,40.772],["z"],["M",102.989,86.943],["M",102.396,86.424],["c",0.25,0.22,0.447,0.391,0.594 ,0.519],["C",102.796,86.774,102.571,86.578,102.396,86.424],["z"],["M",169.407,119.374],["c",-0.09,-5.429,- 3.917,-3.914,-3.917,-2.402],["c",0,0,-11.396,1.603,-13.086,-6.677],["c",0,0,3.56,-5.43,1.69,- 12.461],["c",-0.575,-2.163,-1.691,-5.337,-3.637,-8.605],["c",11.104,2.121,21.701,-5.08,19.038,-15.519],["c ",-3.34,-13.087,-19.63,-9.481,-24.437,-9.349],["c",-4.809,0.135,-13.486,-2.002,-8.011,-11.618],["c",5.473 ,-9.613,18.024,-5.874,18.024,-5.874],["c",-2.136,0.668,-4.674,4.807,-4.674,4.807],["c",9.748,-6.811,22.301,4.541,22.301,4.541],["c",-3.097,-13.678,-23.153,-14.636,- 30.041,-12.635],["c",-4.286,-0.377,-5.241,-3.391,-3.073,-6.637],["c",2.314,-3.473,10.503,-13.976,10.503,-13.976] ,["s",-2.048,2.046,-6.231,4.005],["c",-4.184,1.96,-6.321,-2.227,-4.362,-6.854],["c",1.96,-4.627, 8.191,-16.559,8.191,-16.559],["c",-1.96,3.207,-24.571,31.247,-21.723,26.707],["c",2.85,-4.541,5.253,-11.93,5.253,- 11.93],["c",-2.849,6.943,-22.434,25.283,-30.713,34.274],["s",-5.786,19.583,-4.005,21.987],["c",0.43,0.58,0.601 ,0.972,0.62,1.232],["c",-4.868,-3.052,-3.884,-13.936,-0.264,-19.66],["c",3.829,-6.053,18.427,-20.207,18.427,- 20.207],["v",-1.336],["c",0,0,0.444,-1.513,-0。089,-0.444],["c",-0.535,1.068,-3.65,1.245,-3.384,-0.889],["c",0.268,-2.137,-0.356,-8.549,-0.356,-8.549] ,["s",-1.157,5.789,-2.758,5.61],["c",-1.603,-0.179,-2.493,-2.672,-2.405,-5.432],["c",0.089,-2.758 ,-1.157,-9.702,-1.157,-9.702],["c",-0.8,11.75,-8.277,8.011,-8.277,3.74],["c",0,-4.274,-4.541,-12.82 ,-4.541,-12.82],["s",2.403,14.421,-1.336,14.421],["c",-3.737,0,-6.944,-5.074,-9.879,-9.882],["C" ,78.161,5.874,68.279,0,68.279,0],["c",13.428,16.088,17.656,32.111,18.397,44.512],["c",-1.793,0.422,-2.908,2.224,-2.908, 2.224],["c",0.356,-2.847,-0.624,-7.745,-1.245,-9.882],["c",-0.624,-2.137,-1.159,-9.168,-1.159,-9.168], ["c",0,2.67,-0.979,5.253,-2.048,9.079],["c",-1.068,3.828,-0.801,6.054,-0.801,6.054],["c",-1.068,-2.227,-4.271,-2.137,-4.271,-2.137],["c",1.336,1.783,0.177,2.493,0.177,2.493],["s",0,0 ,-1.424,-1.601],["c",-1.424,-1.603,-3.473,-0.981,-3.384,0.265],["c",0.089,1.247,0,1.959,-2.849,1.959], ["c",-2.846,0,-5.874,-3.47,-9.078,-3.116],["c",-3.206,0.356,-5.521,2.137,-5.698,6.678],["c",- 0.179,4.541,1.869,5.251,1.869,5.251],["c",-0.801,-0.443,-0.891,-1.067,-0.891,-3.473],...869,5.251,1.869,5.251],["c",-0.801,-0.443,-0.891,-1.067,-0.891,-3.473],...869,5.251,1.869,5.251],["c",-0.801,-0.443,-0.891,-1.067,-0.891,-3.473],... ..这只是整个输出的第五(!)部分! 这里发生了什么?好吧,事实证明,这个 该怎么办? 这是 canvas.item(0).sourcePath = '/assets/dragon.svg'; console.log(JSON.stringify(canvas.toDatalessJSON())); ..记录的输出是: {"objects":[{"type":"path","left":143,"top":143,"width":175,"height":151,"fill":"#231F20","overlayFill ":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":-19,"flipX":false,"flipY" :false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false, "path":" /assets/dragon.svg" }],"背景":"rgba(0, 0, 0, 0)"} 嗯,那肯定更小!所以发生了什么事?注意在调用之前 在处理大量复杂形状时, 现在回到 现在,让我们看一下 SVG 加载方法。我们可以使用字符串或 URL: fabric.loadSVGFromString('...', function(objects, options) { var obj = fabric.util.groupSVGElements(objects, options); canvas.add(obj).renderAll(); }); 第一个参数是 SVG 字符串,第二个参数是回调函数。当 SVG 被解析和加载并接收 2 个参数时调用回调 -
子类化由于 Fabric 是以真正面向对象的方式构建的,因此它旨在使子类化和扩展变得简单而自然。正如您在本系列的第 1 部分中所知道的,Fabric 中有一个现有的对象层次结构。所有 2D 对象(路径、图像、文本等)都继承自 那么我们将如何对 Fabric 中现有的“类”之一进行子类化呢?或者甚至创造我们自己的? 对于这个任务,我们需要 var Point = fabric.util.createClass({ initialize: function(x, y) { this.x = x || 0; this.y = y || 0; }, toString: function() { return this.x + '/' + this.y; } });
var point = new Point(10, 20); 点.x; // 10点.y; // 20点.toString(); // “10/20” 如果我们想创建一个“Point”类的孩子——比如说一个彩色点,我们会这样使用 var ColoredPoint = fabric.util.createClass(Point, { initialize: function(x, y, color) { this.callSuper('initialize', x, y); this.color = color || '#000'; }, toString: function() { return this.callSuper('toString') + ' (color: ' + this.color + ')'; } }); 请注意具有实例级属性的对象现在如何作为第二个参数传递。第一个参数接收 var redPoint = new ColoredPoint(15, 33, '#f55'); 红点.x; // 15 redPoint.y; // 33 redPoint.color; // "#f55" redPoint.toString(); “15/33(颜色:#f55)” 所以现在我们已经创建了自己的“类”和“子类”,让我们看看如何使用已经存在的 Fabric 类。例如,让我们创建一个 var LabeledRect = fabric.util.createClass(fabric.Rect, { type: 'labeledRect', // 初始化可以是 function(options) 或 function(property, options) 类型,如文本。 // 不允许其他签名。 初始化:function(options) { options || (options = { }); this.callSuper('initialize', options); this.set('label', options.label || ''); }, toObject: 函数() { return fabric.util.object.extend(this.callSuper('toObject'), { label: this.get('label') }); }, _render: function(ctx) { this.callSuper('_render ', ctx); ctx.font = '20px Helvetica'; ctx.fillStyle = '#333'; ctx.fillText(this.label, -this.width/2, -this.height/2 + 20); } }); 看起来这里发生了很多事情,但实际上很简单。 首先,我们将父“类”指定为 现在,如果我们要渲染这样的对象: var tagsRect = new LabeledRect({ width: 100, height: 50, left: 100, top: 100, label: 'test', fill: '#faa' }); canvas.add(labeledRect); ..我们会得到这个: 更改标签值或任何其他常见的矩形属性显然会按预期工作: 标签矩形.set({ 标签:'trololo', 填充:'#aaf', rx:10, ry:10 }); 当然,此时,您可以随意修改这个“类”的行为。例如,将某些值设为默认值,以避免每次都将它们传递给构造函数。或者使实例上的某些可配置属性可用。如果您确实使其他属性可配置,您可能希望在 ...初始化:函数(选项){ 选项|| (选项 = { }); this.callSuper('initialize', options); // 给所有标记的矩形固定宽度/高度 100/50 this.set({ width: 100, height: 50 }); this.set('label', options.label || ''); } ... _render: function(ctx) { // 使标签的字体和填充值可配置ctx.font = this.labelFont; ctx.fillStyle = this.labelFill; ctx.fillText(this.label, -this.width/2, -this.height/2 + 20); } ... 为了克隆和保存/恢复这个类,你需要添加一个`fromObject`静态方法,最重要的是,要添加到主fabricObject的子类: // 标准选项 type: fabric.labeledRect.fromObject = function(object, callback) { return fabric.Object._fromObject('LabeledRect', object, callback); } ... // 参数 + 选项类型:// 在本例中,aProp 是对象中包含值的属性// 在 `new fabric.MyClass(someValue, options)` fabric.labeledRect.fromObject中的 someValue = function(object, callback) { return fabric.Object._fromObject('LabeledRect', object, callback, 'aProp'); } 在此说明中,我将结束本系列的第 3 部分,其中我们深入探讨了 Fabric 的一些更高级的方面。在组、类和(反)序列化的帮助下,您可以将您的应用程序提升到一个全新的水平。 阅读第 4 部分。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com