在 fabric.js canvas 中操作 svg 文件

Question

我正在尝试使用 fabric.js 处理 svg 文件。我正在将 svg 字符串 fabric.loadSVGFromString 正确加载到 canvas 中。我的问题是如何操作 svg 的某些部分。

例如，我导入了一个有很多孔的电子面包板，如下图所示。

如何检测是否点击了孔？我怎样才能得到点击的部分？

谢谢

Answer 1

一种方法是：

首先，您必须在面包板图像上存储每个孔的坐标数组
加载背景图像后，循环遍历该数组中的每个条目并在相应的孔上创建一个形状（例如，fabric.Circle）
创建形状后立即将 mousedown 事件处理程序附加到此形状
在该事件处理程序中进行点击处理

这里有一些参考资料可以帮助您：

http://fabricjs.com/per-pixel-drag-drop/
mouse:down vs. mousedown in fabric.js

Answer 2

我做了一个非常简短的演示，说明了您可以做什么。重点是创建一个可以作为单个形状导入的 svg，将形状锁定在 canvas，然后处理点击事件。

var canvas = new fabric.Canvas("bb");
svg = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" x="0in" y="0in" width="6.50331in" height="2.1in" viewBox="0 0 468.238 151.2" ><g partID="57380"><g  id="breadboardbreadboard"> <g  id="background">  <rect  fill="#D9D9D9" height="151.199" width="468.238" y="0"/> </g> <g  id="stripes"><rect  fill="#B3B0B0" height="0.4" width="468.238" y="20.932"/>  <rect  fill="#B3B0B0" height="0.4" width="468.238" y="129.475"/> </g> <g >  <rect  fill="#FF0000" height="0.4" width="468.238" y="19.2"/>  <rect  fill="#FF0000" height="0.4" width="468.238" y="148.799"/>  <rect  fill="#0000FF" height="0.4" width="468.238" y="2.4"/>  <rect  fill="#0000FF" height="0.4" width="468.238" y="132"/> </g> <g >  <rect  fill="#CCC9C9" height="7.2" width="468.238" y="71.2"/> </g> <g  id="sockets">  <g  id="pin1A">   <path  fill="#BFBFBF" d="M8.526,115.2c0,-1.322,1.072,-2.394,2.394,-2.394s2.394,1.071,2.394,2.394"/>   <path  fill="#E6E6E6" d="M13.313,115.2c0,1.322,-1.072,2.394,-2.394,2.394s-2.394,-1.071,-2.394,-2.394"/>   <circle  r="1.197" fill="#383838" cx="10.92" cy="115.2"/>  </g>  <g  id="pin1B">   <path  fill="#BFBFBF" d="M8.526,108c0,-1.322,1.072,-2.395,2.394,-2.395s2.394,1.072,2.394,2.395"/>   <path  fill="#E6E6E6" d="M13.313,108c0,1.321,-1.072,2.393,-2.394,2.393S8.526,109.322,8.526,108"/>   <circle  r="1.197" fill="#383838" cx="10.92" cy="108"/>  </g>  <g  id="pin1C">   <path  fill="#BFBFBF" d="M8.526,100.799c0,-1.321,1.072,-2.393,2.394,-2.393s2.394,1.071,2.394,2.393"/>   <path  fill="#E6E6E6" d="M13.313,100.799c0,1.322,-1.072,2.395,-2.394,2.395s-2.394,-1.072,-2.394,-2.395l0,0"/>   <circle  r="1.197" fill="#383838" cx="10.92" cy="100.8"/>  </g></g></g></svg>';


fabric.loadSVGFromString(svg, function(objs) {
  var obj;
  for(var i = 0; i < objs.length; i++) {
    obj = objs[i];
    obj.lockMovementX = true;
    obj.lockMovementY = true;
    obj.hasControls= false;
    canvas.add(obj);
  }});

canvas.on("object:selected", function(evt) {
  var id = evt.target.id;
  if (id.slice(0,3) == 'pin') {
    alert(id.slice(3,5));
  }
});

<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas width="600" height="400" id="bb" ></canvas>

在 fabric.js canvas 中操作 svg 文件

manipulate svg file within a fabric.js canvas

javascript

jquery

svg

fabricjs