Блог

Главная - Вопросы по программированию - Почему fabric.Путь в FabricJS отображается иначе, чем в svg-файле?

Почему fabric.Путь в FabricJS отображается иначе, чем в svg-файле?

#html5-canvas #fabricjs #fabricjs2

#html5-canvas #fabricjs #fabricjs2

Вопрос:

Я хочу отобразить путь в Fabric.JS в svg-файле:

 <g>
  <path style="fill:none;stroke:#000000;stroke-miterlimit:10;" 
    d="M221.58-0.55 c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72"/>
</g>

И код в моем Fabricjs

 var Path_0_1 = new fabric.Path('M221.58-0.55   c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72', {
  fill: 'none',
  stroke: '#000000',
  strokeMiterLimit: 10,
  opacity: 1,
});

Но результат не тот:
введите описание изображения здесь

Ожидается: путь в FabricJS отображается так же, как в SVG-файле.

Вот мой код:

 var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

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

var Path_0_1 = new fabric.Path('M221.58-0.55   c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72', {
  //				fill : 'none',
  stroke: '#000000',
  strokeMiterLimit: 10,
  opacity: 1,
});
canvas.add(Path_0_1);
canvas.moveTo(Path_0_1, 1);
setObjectCoords();
canvas.renderAll();

function setObjectCoords() {
  canvas.forEachObject(function(object) {
    object.setCoords();
  });
}  
 #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>

И вот мой svg-файл:
https://svgur.com/s/Bw6

Комментарии:

1. Помните, что если у вас есть дескриптор элемента SVG, вы можете просто использовать fabric.Path.fromElement (svgNode), чтобы получить путь с правильными параметрами.

2. @AndreaBogazzi, спасибо за вашу рекомендацию, в некоторых случаях это был бы хороший способ

Ответ №1:

Установите fill значение '' || null || 'transparent' , чтобы ctx.fill() оно ничего не заполняло для объекта.

ДЕМОНСТРАЦИЯ

 var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var Path_0_1 = new fabric.Path('M221.58-0.55c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72', {
  fill : null,
  stroke: '#000000',
});
canvas.add(Path_0_1);  
 #canvasContainer {
  width: 100%;
  height: 100vh;
}  
 <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>