【发布时间】：2015-12-24 00:52:32
【问题描述】：
我是 javascript 和 SVG 的新手，我没有图形编程背景，这是我第一个使用所有这些的项目。所以我开始制作一个自定义元素，就像Mike Goodwin answer 提议的那样，我在编辑后以这段代码结束：
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"/>
第一行的结果将是使用工具在其上方再次绘制的元素，如下所示：
第二行最终什么都没有显示。
下面是下一个问题：
为什么第一行的结果是这样的？ 和 如何将红色圆圈变成其他形状？
更新： 关于画线：
'<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 来设置起点。
【问题讨论】：
-
路径必须以 M（或 m）开头。您的 x 和 y 似乎是文字字符串值而不是变量，这也不起作用。
-
x 和 y 实际上是我的代码上的数字。它们不是文字字符串，我只是忘了说明，对于 x 和 y 的任何值，它都不起作用。如果我添加 M 或 m，则抽签将在上一次抽签结束时开始，如前所述。例如在上图中，它会从左上角的白色“X”的末尾开始，并被绘制到绿色圆圈，就像它是第二次绘制的一部分一样。
-
你可以将 M 设置为任何你想要的。它不会从上一次抽签开始，它将从您设置 M 开始点的任何地方开始。
-
我刚刚发现了为什么这不起作用。似乎 M 不是起点。我会更新问题。
-
我大错特错了。 M 和 translate 定义了起点。需要另一个更新。
标签： javascript svg jointjs