如何使用Jointjs和SVG绘制元素工具

Question

我是 javascript 和 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 tutorial on paths to draw and 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"/>

第一行的结果将是使用工具在其自身上方再次绘制的元素，如下所示：

而第二行最终什么都不显示。

接下来的问题是：

为什么第一行的结果是这样的？ 和 如何将红色圆圈变成其他形状？

更新： 关于画线：

'<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) 更改为其他内容使正确的起点成为可能。所以它的 translate 属性结合 M 设置了起点。

Answer 1

更新时回答的第一个问题。至于第二个问题（关于红色方块与矩形内的元素形状冲突），这是我的解决方法：

使用路径绘制工具元素，而不是使用基本形状，这样就不会与元素形状冲突。

示例：

'<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"/>' 定义圆形。

如何使用Jointjs和SVG绘制元素工具

How to use Jointjs and SVG to draw element tools

javascript

svg

jointjs