Question

我有附加图像1中描述的路径，我想将另一个元素（如红色圆角）拖放到绘制路径的边缘，所以最后我想拖动红色标记的元素在路径边缘的黑线上，不在路径内，现在我可以在路径内外移动，但我只想在路径的边界上

所以我在mouseMove函数和select案例中定制了如下代码：svgedit.compiled.js

if (path_child == 'path') {
    var line_rotate = 90;
    if (group_w_d == "drag_drop_D") {
        var test = 'rotate(' + line_rotate + ',' + line_pt.x + ',' + line_pt.y + ') translate(' + trans_x + ',' + line_pt.y + ') scale(' + width + ',' + height + ')';
    } else {
        var test = 'rotate(' + line_rotate + ',' + line_pt.x + ',' + line_pt.y + ') translate(' + line_pt.x + ',' + line_pt.y + ') scale(' + width + ',' + height + ')';
    }
    selectedElements[0].setAttribute('transform', test);

    var cls = selectedElements[0].getAttribute('class');
    //alert(cls);
    $('.' + cls).each(function() {
        $(this).attr('transform', test)
    });
}

Image one Image two

例如，这里是小提琴链接example，我想要它，在这里我们可以在任何我们想要的路径上移动椭圆，但我希望它在我的路径元素的边缘

编辑： 例如，假设我们正在使用矩形创建一个房间，在这个房间里我们必须修理一个门或窗口，就像标记为圆形红色一样，所以我们可以沿着矩形的所有位置移动路径但是它应该只在边缘不在rect内或rect之外，我们就没有问题了，

但是现在我们想要将墙拆分为扩展墙，因此我们将rect转换为path转换后，门或窗口不会随path的边缘一起移动其中门正在SVG-EDIT

的工作区域的任何地方移动

这里我的门窗是g而不是ellipse，所以我知道椭圆只有cx，cy和g可能有transform所以我不知道明确怎么做我希望这会有意义

Answer 1

你需要调整我的SO answer，请参阅三角小提琴的评论部分（所以不要让我发布没有代码的小提琴链接）。基本上从三角形的质心延伸线并计算交叉路径。

编辑：在原生SVG中，您需要一个intersection库来行

请在此处发布更新后的代码以供将来阅读。

SVG在路径边缘拖动元素

1 个答案: