如何创建可拉伸的svg形状

如何创建具有不同形状的可拉伸功能的工作流组件，如本链接中所示

我用d3实现了一个示例，比如draggable circle，但我不知道如何实现形状的拉伸

var-boxWidth=600；
var-boxHeight=400；
变量框=d3。选择（'主体'）
.append（'svg'）
.attr（'class'，'box'）
.attr（'width'，boxWidth）
.attr（'height'，boxHeight）；
var drag=d3.behavior.drag（）
.on（'dragstart'，function（）{
圆形。样式（“填充”、“红色”）；
})
.on（'drag'，function（））{
circle.attr（'cx'，d3.event.x）
.attr（'cy'，d3.event.y）；
})
.on（'dragend'，function（）{
圆形样式（“填充”、“黑色”）；
});
var circle=box.selectAll（“.draggableCircle”）
.数据([{
x:（箱宽/2），
y:（箱高/2），
r:25
}])
.输入（）
.append（'svg:circle'）
.attr（'class'，'draggableCircle'）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
})
.attr（'r'，函数（d）{
返回d.r；
})
.呼叫（拖动）
.样式（“填充”、“黑色”）
.box{
边框：1px纯黑；
边界半径：10px；
}
不确定“拉伸”的概念是什么，但您可以查看变换，如缩放和倾斜

transform=“skewX（50）”
transform=“skewY（50）”
这里有一种方法——添加一个组，并在元素后面添加元素和元素的重影，但大小稍大一些。此元素可用于调整大小

在下面的代码片段中，我已将此添加到您的圆圈移动代码中


var-boxWidth=600；
var-boxHeight=400；
变量框=d3。选择（'主体'）
.append（'svg'）
.attr（'class'，'box'）
.attr（'width'，boxWidth）
.attr（'height'，boxHeight）；
var drag=d3.behavior.drag（）
.on（'drag'，function（））{
g、 选择全部（“*”）
.attr（'cx'，d3.event.x）
.attr（'cy'，d3.event.y）；
})
var resize=d3.behavior.drag（）
.on（'drag'，function（））{
g、 选择全部（“.resizingContainer”）
.attr（'r'，函数（c）{
返回Math.pow（Math.pow（this.attributes.cx.value-d3.event.x，2）+Math.pow（this.attributes.cy.value-d3.event.y，2），0.5）+6；
});
g、 selectAll（“.DragableCircle”）
.attr（'r'，函数（c）{
返回Math.pow（Math.pow（this.attributes.cx.value-d3.event.x，2）+Math.pow（this.attributes.cy.value-d3.event.y，2），0.5）；
});
})
var g=box.selectAll（'.draggableGroup'）
.数据([{
x:（箱宽/2），
y:（箱高/2），
r:25
}])
.输入（）
.append（'g'）
G
.append（'svg:circle'）
.attr（'class'，'resizingContainer'）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
})
.attr（'r'，函数（d）{
返回d.r+6；
})
.style（'fill'，'#999'）
.呼叫（调整大小）；
G
.append（'svg:circle'）
.attr（'class'，'draggableCircle'）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
})
.attr（'r'，函数（d）{
返回d.r；
})
.呼叫（拖动）
.style（'fill'，'black'）
.box{
边框：1px纯黑；
边界半径：10px；
}
.resizingContainer{
光标：nesw调整大小；
}
如果您已经尝试了一些东西，请发布一些代码作为起点。然后，不要问“如何创建可拉伸形状”这样的大问题，你可以问“我如何使本例中的圆可拉伸？”。更新了这个问题。这真的很复杂，我会将其分解为更小的块，然后决定如何拖动/拉伸形状。如果要拉伸一个圆，会发生什么？你是在上面放一个刻度，还是把它变成一个椭圆？如果是矩形，是否选择一个角点并拖动它，您希望如何决定拉伸还是拖动？这是一个很大的问题。Phrogz有一个很好的演示，演示了如何动态调整元素的大小。一个简单的问题是，用户是否可以将文本键入形状中？让我们创建一个svg形状。从我在问题中提供的链接来看，如果你看到我可以输入一个shapeIt，那么最好使用一个普通的HTML输入框。您可以使用foreignObject将其附加到SVG（但我很确定它在IE中不起作用），或者找到SVG元素的位置，或者简单地打开一个对话框：-）