在fabric.js畫布內操作svg文件

Question

我正在嘗試使用fabric.js操作svg文件。 我正在將svg字符串fabric.loadSVGFromString正確加載到畫布中。 我的問題是如何處理svg的某些部分。

例如，我導入了一個帶有很多孔的電子面包，如下圖所示 。

如何檢測是否單擊了孔？ 我如何獲得被點擊的零件？

謝謝

Answer 1

我做了一個簡短的演示，演示了您可以做什么。 關鍵是創建一個可以作為單個形狀導入的svg，將形狀鎖定在畫布上，然后處理單擊事件。

 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> 

Answer 2

一種方法是：

• 首先，您必須在面包板圖像上存儲每個孔的坐標數組
• 在將背景圖像循環加載到該數組中的每個條目並在對應的孔上創建形狀（例如fabric.Circle ）之后
• 在創建形狀后，立即將mousedown事件處理程序附加到該形狀
• 在該事件處理程序中進行點擊處理

這里有一些參考資料可以幫助您：

• http://fabricjs.com/per-pixel-drag-drop/
• fabric.js中的mouse：down與mousedown