fabric实现可拖动的多节点人形骨骼效果代码

代码语言:html

所属分类:拖放

代码描述:fabric实现可拖动的多节点人形骨骼效果代码

代码标签: fabric 拖动 节点 骨骼

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

</head>

<body>
    <canvas id="c"  width="400" height="400">
        
    </canvas>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fabric.4.6.0.js"></script>
    <script type="text/javascript">
        (function() {
      var canvas = this.__canvas = new fabric.Canvas('c', { selection: false });
      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, 25.........完整代码请登录后点击上方下载按钮下载查看

网友评论0