如何使用 draw2d 繪制自定義形狀？

Question

我正在使用draw2d javascript 庫在 canvas 中繪制預定義形狀和自定義形狀。

由於我還沒有制作任何示例，因此我試圖從它的文檔中進行復制，但似乎沒有找到研究它的好方法，因為它包含了很多內容。

這是圓圈的例子。 http://www.draw2d.org/draw2d_touch/jsdoc_6/#./api/draw2d.shape.basic.Circle

這里有更多帶有示例的文檔。 http://www.draw2d.org/draw2d_touch/jsdoc_6/

我有 html 和 css 的預制形狀，我正在嘗試將它們拖放到 canvas 上，就像這張圖片中的這些一樣。 同樣，當掉線時，它們也應該有輸入和 output 端口。

是否可以將此 html/css 轉換為 draw2d 形狀？

Answer 1

所以這里可以通過擴展 draw2d 的 SVGFigure 來實現，因此我們能夠提供自定義 svg 以將其呈現為自定義形狀。

以下鏈接在這種情況下很有用。

http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example

https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg

http://www.draw2d.org/draw2d_touch/jsdoc_6/#./api/draw2d.SetFigure

https://github.com/freegroup/draw2d/tree/master/examples/shape_labeld

https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown