[英]How to draw custom shapes with draw2d?
I am using draw2d
javascript library for drawing predefined shapes and custom shapes in it's canvas.我正在使用draw2d
javascript 库在 canvas 中绘制预定义形状和自定义形状。
As I don't have any example made yet, I am trying to copy from it's documentation but doesn't seem to find a good way to research it as it contains a whole lot of it.由于我还没有制作任何示例,因此我试图从它的文档中进行复制,但似乎没有找到研究它的好方法,因为它包含了很多内容。
Here is the circle example.这是圆圈的例子。 http://www.draw2d.org/draw2d_touch/jsdoc_6/#./api/draw2d.shape.basic.Circle http://www.draw2d.org/draw2d_touch/jsdoc_6/#./api/draw2d.shape.basic.Circle
and here are some more documentation with examples.这里有更多带有示例的文档。 http://www.draw2d.org/draw2d_touch/jsdoc_6/ http://www.draw2d.org/draw2d_touch/jsdoc_6/
I have premade shapes with html and css and I am trying to drag and drop and render them on canvas like these in this image.我有 html 和 css 的预制形状,我正在尝试将它们拖放到 canvas 上,就像这张图片中的这些一样。 Also when dropped, they should have input and output ports too.同样,当掉线时,它们也应该有输入和 output 端口。
Is it possible to convert this html/css to draw2d shapes?是否可以将此 html/css 转换为 draw2d 形状?
So here this is made possible via extending draw2d's SVGFigure and thus we have ability to provide custom svg to render it as a custom shape.所以这里可以通过扩展 draw2d 的 SVGFigure 来实现,因此我们能够提供自定义 svg 以将其呈现为自定义形状。
Below links were useful in this context.以下链接在这种情况下很有用。
http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example 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 https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg
http://www.draw2d.org/draw2d_touch/jsdoc_6/#./api/draw2d.SetFigure 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_labeld
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.