如何创建可拉伸的SVG形状

Question

如何创建具有不同形状的可拉伸功能的工作流组件，例如此链接http://rigrr.rapilabs.com/

我已经使用d3（例如可拖动的圆）实现了一个示例，但是我不知道如何实现形状的拉伸

 var boxWidth = 600; var boxHeight = 400; var box = d3.select('body') .append('svg') .attr('class', 'box') .attr('width', boxWidth) .attr('height', boxHeight); var drag = d3.behavior.drag() .on('dragstart', function() { circle.style('fill', 'red'); }) .on('drag', function() { circle.attr('cx', d3.event.x) .attr('cy', d3.event.y); }) .on('dragend', function() { circle.style('fill', 'black'); }); var circle = box.selectAll('.draggableCircle') .data([{ x: (boxWidth / 2), y: (boxHeight / 2), r: 25 }]) .enter() .append('svg:circle') .attr('class', 'draggableCircle') .attr('cx', function(d) { return dx; }) .attr('cy', function(d) { return dy; }) .attr('r', function(d) { return dr; }) .call(drag) .style('fill', 'black'); 

 .box { border: 1px solid black; border-radius: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> 

Answer 1

不确定您对“拉伸”的想法是什么，但是您可以查看缩放和倾斜等变换。

transform =“ skewX（50）” transform =“ skewY（50）”

Answer 2

这是一种实现方法-添加一个组并在该元素后面添加该元素以及该元素的幻影，但其大小稍大一些。 此元素可用于调整大小。

我已在以下代码段中将其添加到您的圈子移动代码中

  var boxWidth = 600; var boxHeight = 400; var box = d3.select('body') .append('svg') .attr('class', 'box') .attr('width', boxWidth) .attr('height', boxHeight); var drag = d3.behavior.drag() .on('drag', function() { g.selectAll('*') .attr('cx', d3.event.x) .attr('cy', d3.event.y); }) var resize = d3.behavior.drag() .on('drag', function() { g.selectAll('.resizingContainer') .attr('r', function(c) { return 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('.draggableCircle') .attr('r', function(c) { return 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') .data([{ x: (boxWidth / 2), y: (boxHeight / 2), r: 25 }]) .enter() .append('g') g .append('svg:circle') .attr('class', 'resizingContainer') .attr('cx', function(d) { return dx; }) .attr('cy', function(d) { return dy; }) .attr('r', function(d) { return dr + 6; }) .style('fill', '#999') .call(resize); g .append('svg:circle') .attr('class', 'draggableCircle') .attr('cx', function(d) { return dx; }) .attr('cy', function(d) { return dy; }) .attr('r', function(d) { return dr; }) .call(drag) .style('fill', 'black') 

  .box { border: 1px solid black; border-radius: 10px; } .resizingContainer { cursor: nesw-resize; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>