fabricJS - 获取对象类

Question

我正在导入一个简单的 SVG，包括两个路径。它们都有 CSS 类。

一旦加载到我的画布中，我就想访问这些类。有可能吗？

我尝试使用myPath.class，返回未定义，并且检查我的对象本身并没有显示任何看起来像我的类的东西。

Answer 1

您需要将class 属性添加到fabric.SHARED_ATTRIBUTES 数组。 这是rectangle 的示例。

fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});


fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {

  var obj = fabric.util.groupSVGElements(objects, options);
  canvas.add(obj).renderAll();
  alert(canvas.getObjects()[0].class);
});

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#8DC63F;}
	
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>

</svg>

</textarea>