如何使用Jointjs和SVG繪製元素工具

我是JavaScript和SVG的新手，我沒有圖形編程背景，這是我使用所有這些工具的第一個項目。於是，我開始做就像Mike Goodwin answer提出了一個自定義元素，我編輯它後，此代碼結束：如何使用Jointjs和SVG繪製元素工具

joint.shapes.tools.tooledElement = joint.shapes.basic.Generic.extend({ 

    toolMarkup: [ 
     '<g class="element-tools">', 
      '<g class="element-tool-remove"><circle fill="red" r="11" stroke="black" stroke-width="1"/>', 
       '<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>', 
       '<title>Remove this element from the model</title>', 
      '</g>', 
      '<g class="element-tool-link"><circle fill="green" r="11" cx="160" cy="40" stroke="black" stroke-width="1"/>', 
       '<path transform="scale(.7) translate(-16, -16)"/>', 
       '<title>creates a new link</title>', 
      '</g>', 
     '</g>' 
    ].join(''), 

    defaults: joint.util.deepSupplement({ 
     attrs: { 
      text: { 'font-weight': 400, 'font-size': 'small', fill: 'black', 'text-anchor': 'middle', 'ref-x': .5, 'ref-y': .5, 'y-alignment': 'middle' } 
     } 
    }, joint.shapes.basic.Generic.prototype.defaults) 

});

哪些工作正常。現在我想在綠色圓圈上畫一些線，並將紅色圓圈變成紅色方塊。爲了達到這個目的，我看了this關於繪製路徑的教程和this關於基本形狀的教程。但如果我嘗試在這樣的綠色圓圈上劃線：

'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="x y L 10 10 " />'

它不會畫任何東西。他們確實會說：「如果你的光標已經在頁面的某個地方，那麼不會畫出任何線來連接這兩個地方。」這就是爲什麼我從路徑中省略了「M」的原因。

因此，第一個問題是：如何從綠色圓圈的中心畫出線條，而不是從其他路徑上定義的上一個點開始繪製線條？

爲了使紅色正方形我試圖從第二教程更改填充完全相同例子（作爲測試）：

//first line to test 
<rect x="10" y="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>

或

//second line to test 
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>

第一行的結果將成爲工具被用來再次在其上方繪製的元素：

而第二行最終沒有任何顯示。

因此，這裏的下一個問題：

爲什麼從第一行的結果得到了這樣？ 和 如何將紅色圓圈更改爲任何其他形狀？

UPDATE： 關於畫線：

'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M150 150 H 5 V 5 H 5 z" />'

如果我使用例如這個代碼，這是結果：

'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M150 150 H 5 V 5 H 5 z" />'

如果我使用這個其他的代碼，那麼結果將是：

本教程使我相信，M被定義開始點，但改變translate(-16, -16)別的東西做出了正確的起點是不可能的。所以它的翻譯屬性結合M設定了起點。

來源

2015-09-26 Pfeiffer

路徑必須以M（或m）開頭。你的x和y似乎是字面的字符串值而不是變量，這也是行不通的。 –

x和y實際上是我的代碼上的數字。他們不是字面字符串，我只是忘了說清楚，對於x和y的任何值都行不通。如果我添加M或m，則如前所述，抽籤將在前一抽籤結束時開始。例如，在上面的圖片中，它將從左上角的白色「X」的末端開始，並將其畫成綠色圓圈，就好像它是第二次繪製的一塊。 – Pfeiffer

那麼你可以將M設置爲任何你想要的。它不會從先前的繪製開始，它將在您設置M起點的任何位置開始。 –

第一個問題已在更新時得到解答。至於第二個問題（關於紅色正方形與元素形狀衝突的一個矩形內），這是我的解決方法：

使用路徑來繪製工具的元素，而不是使用基本形狀，這樣纔不會發生衝突與元素形狀。

實施例：

'<g class="element-tool-link"><circle fill="green" r="11" cx="160" cy="40" stroke="black" stroke-width="1"/>', 
    '<path transform="scale(.7) translate(-16, -16)"/>', 
    '<title>creates a new link</title>', 
'</g>'

會變成：

'<g class="element-tool-link">', 
    '<path d="M33 0 a 11 11 0 1 0 0.0001 0z " stroke="black" fill="lightblue" stroke-width="1"/>', 
    '<path transform="scale(.7) " stroke="black" stroke-width="1" d="M58,16 H 37 "/>', 
    '<title>creates a new link</title>', 
'</g>'

其中'<path d="M33 0 a 11 11 0 1 0 0.0001 0z " stroke="black" fill="lightblue" stroke-width="1"/>'限定了圓形狀。

來源

2015-10-14 16:03:07 Pfeiffer

如何使用Jointjs和SVG繪製元素工具

回答

相關問題