Fabric jsstickman - 以编程方式动画制作肢体并保持所有圆圈和线条之间的关节

Posted 2023-03-25

【中文标题】Fabric jsstickman - 以编程方式动画制作肢体并保持所有圆圈和线条之间的关节

【英文标题】：Fabric js stickman - animate limbs programatically and maintain joints between all circles and lines

【发布时间】：2019-05-30 23:23:56

【问题描述】：

我目前正在使用 Fabric Js 开发一个火柴人，它将以编程方式控制。根据 Fabric Stickman 演示，您可以拖放圆圈。但是，当您尝试以编程方式一次使用多个圆圈执行此操作时，关节会断裂 - 线条不再跟随圆圈定位。

这是一段代码，我在其中循环一个对象，为每个肢体设置动画。

let positionStateStore = 
    ARM_RAISE: 
        leftElbowCircle: 
            ref: 'leftElbowCircle',
            top: 152,
            left: 206
        ,
        rightElbowCircle: 
            ref: 'rightElbowCircle',
            top: 158,
            left: 286
        ,
        rightHandCircle: 
            ref: 'rightHandCircle',
            top: 110,
            left: 309
        ,
        leftHandCircle: 
            ref: 'leftHandCircle',
            top: 111,
            left: 191
        
    


var _keys = ['leftElbowCircle', 'rightElbowCircle', 'rightHandCircle', 'leftHandCircle'];

for (var i = 0; i < _keys.length; i++) 
    var obj = positionStateStore.ARM_RAISE[_keys[i]];
    var ref = circles[_keys[i]];
    ref.animate('top', obj.top, 
        duration: 1000,
        onChange: function () animateObj(ref); ,
        onComplete: function() 
    );

有谁知道我如何确保这些保持同步？谢谢你提供的所有帮助。

【问题讨论】：

用你的代码创建一个 sn-p/fiddle

@Durga - 感谢您提供帮助 - 我设法解决了这个问题并推进了我的项目。请看：github.com/nicktaras/stick-person

【参考方案1】：

你试图达到这样的目标？：

(function() 
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  function makeCircle(left, top, line1, line2, line3, line4) 
    var c = new fabric.Circle(
      left: left,
      top: top,
      strokeWidth: 5,
      radius: 12,
      fill: '#fff',
      stroke: '#666'
    );
    c.hasControls = c.hasBorders = false;

    c.line1 = line1;
    c.line2 = line2;
    c.line3 = line3;
    c.line4 = line4;

    return c;
  

  function makeLine(coords) 
    return new fabric.Line(coords, 
      fill: 'red',
      stroke: 'red',
      strokeWidth: 5,
      selectable: false,
      evented: false,
    );
  

  var line = makeLine([ 250, 125, 250, 175 ]),
      line2 = makeLine([ 250, 175, 250, 250 ]),
      line3 = makeLine([ 250, 250, 300, 350]),
      line4 = makeLine([ 250, 250, 200, 350]),
      line5 = makeLine([ 250, 175, 175, 225 ]),
      line6 = makeLine([ 250, 175, 325, 225 ]);

  canvas.add(line, line2, line3, line4, line5, line6);

  canvas.add(
    makeCircle(line.get('x1'), line.get('y1'), null, line),
    makeCircle(line.get('x2'), line.get('y2'), line, line2, line5, line6),
    makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4),
    makeCircle(line3.get('x2'), line3.get('y2'), line3),
    makeCircle(line4.get('x2'), line4.get('y2'), line4),
    makeCircle(line5.get('x2'), line5.get('y2'), line5),
    makeCircle(line6.get('x2'), line6.get('y2'), line6)
  );

  canvas.on('object:moving', function(e) 
 
    var p = e.target;
    if(p.type == 'activeSelection')
    	for(i=0;i<p._objects.length;i++)
         p._objects[i].line1 && p._objects[i].line1.set( 'x2': p.left+p._objects[i].left, 'y2': p.top+p._objects[i].top );
    		 p._objects[i].line2 && p._objects[i].line2.set( 'x1': p.left+p._objects[i].left, 'y1': p.top +p._objects[i].top);
    		 p._objects[i].line3 && p._objects[i].line3.set( 'x1': p.left+p._objects[i].left, 'y1': p.top +p._objects[i].top);
    		 p._objects[i].line4 && p._objects[i].line4.set( 'x1': p.left+p._objects[i].left, 'y1': p.top +p._objects[i].top);
      
    else
      p.line1 && p.line1.set( 'x2': p.left, 'y2': p.top );
    	p.line2 && p.line2.set( 'x1': p.left, 'y1': p.top );
    	p.line3 && p.line3.set( 'x1': p.left, 'y1': p.top );
    	p.line4 && p.line4.set( 'x1': p.left, 'y1': p.top );
    
    
    canvas.renderAll();
  );
)();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id="c"  ></canvas>

【讨论】：

是的，这就是我开始并在此基础上构建的。现在可以了。我会尽快添加代码 - 诀窍是更新循环内的行以及圆的位置。

【参考方案2】：

对于希望使用 Fabric 创建动画棒人的任何人，请查看以下链接 - 该链接正在开发为免费的 alexa 技能。

https://github.com/nicktaras/stick-person