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 d.x;
  })
  .attr('cy', function(d) {
    return d.y;
  })
  .attr('r', function(d) {
    return d.r;
  })
  .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

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

变换= “如果skewX（50）” 变换= “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 d.x;
          })
          .attr('cy', function(d) {
            return d.y;
          })
          .attr('r', function(d) {
            return d.r + 6;
          })
          .style('fill', '#999')
          .call(resize);

        g
          .append('svg:circle')
          .attr('class', 'draggableCircle')
          .attr('cx', function(d) {
            return d.x;
          })
          .attr('cy', function(d) {
            return d.y;
          })
          .attr('r', function(d) {
            return d.r;
          })
          .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>

如何创建可伸缩的svg形状

2 个答案: