0

我想在 svg 文件中显示 Fabric.JS 中的路径：

<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

4

1 回答 1

1

设置fillvalue '' || 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>

于 2019-03-22T14:16:26.553 回答