fabricJS - получить объектные классы - PullRequest
Новая
       4

fabricJS - получить объектные классы

0 голосов
/ 03 января 2019

Я импортирую простой SVG, включающий два пути.У них обоих есть классы CSS.

После загрузки на холст я хотел бы получить доступ к этим классам.Возможно ли это?

Я попытался использовать myPath.class, вернул undefined, и проверка самого моего объекта не показывает ничего похожего на мои классы.

1 Ответ

0 голосов
/ 03 января 2019

Вам необходимо добавить атрибут 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>
...