javascript - Fabricjs 无法获取单选按钮来设置结构对象更改

Question

我无法让我的单选按钮更改单击时添加到织物 Canvas 的对象。每次更改单选按钮时，新的图标颜色保持为绿色，它应该更改为所选颜色。

我正在寻找的行为是当您选择绿色、黄色或红色单选按钮时，放置在 Canvas 上的下一个图标应该变成所选颜色。

有什么想法吗？

function iconSet() {
  var canvas = new fabric.Canvas('c');
  if (document.getElementById("green").checked == true) {
    var iconGreen = new fabric.Triangle({
      width: 62.5,
      height: 50,
      originX: 'center',
      originY: 'center',
      fill: 'green'
    });

    canvas.add(iconGreen);

    canvas.on('mouse:move', function(obj) {
      iconGreen.top = obj.e.y - 30;
      iconGreen.left = obj.e.x - 10;
      canvas.renderAll()
    })
    canvas.on('mouse:out', function(obj) {
      iconGreen.top = -100;
      iconGreen.left = -100;
      canvas.renderAll()
    })
    canvas.on('mouse:up', function(obj) {
      canvas.add(iconGreen.clone());
      canvas.renderAll();
    })
  } else if (document.getElementById("yellow").checked == true) {
    var iconYellow = new fabric.Triangle({
      width: 62.5,
      height: 50,
      originX: 'center',
      originY: 'center',
      fill: 'yellow'
    });

    canvas.add(iconYellow);

    canvas.on('mouse:move', function(obj) {
      iconYellow.top = obj.e.y - 30;
      iconYellow.left = obj.e.x - 10;
      canvas.renderAll()
    })

    canvas.on('mouse:out', function(obj) {
      iconYellow.top = -100;
      iconYellow.left = -100;
      canvas.renderAll()
    })

    canvas.on('mouse:up', function(obj) {
      canvas.add(iconYellow.clone());
      canvas.renderAll();
    })
  } else if (document.getElementById("red").checked == true) {
    var iconRed = new fabric.Triangle({
      width: 62.5,
      height: 50,
      originX: 'center',
      originY: 'center',
      fill: 'red'
    });

    canvas.add(iconRed);

    canvas.on('mouse:move', function(obj) {
      iconRed.top = obj.e.y - 30;
      iconRed.left = obj.e.x - 10;
      canvas.renderAll()
    })

    canvas.on('mouse:out', function(obj) {
      iconRed.top = -100;
      iconRed.left = -100;
      canvas.renderAll()
    })

    canvas.on('mouse:up', function(obj) {
      canvas.add(iconRed.clone());
      canvas.renderAll();
    })
  }
}

canvas {
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>


Green<input name="iconType" type="radio" id="green" onclick="iconSet()" /> Yellow

<input name="iconType" type="radio" id="yellow" onclick="iconSet()" /> Red

<input name="iconType" type="radio" id="red" onclick="iconSet()" />

<canvas id="c" width="600" height="600"></canvas>

Answer 1

因为你每次都在创造new fabric.Triangle取而代之的是，您可以创建一次，当单选按钮值更改时，只会使用 fabricTriangle.setFill() 更新现有 fabricTriangle 的颜色方法。

请看下面的代码片段

document.getElementById('green').checked = true;

var canvas = new fabric.Canvas('c'),
  fabricTriangle = getfabricTriangle('green');

canvas.on('mouse:move', function(obj) {
  fabricTriangle.top = obj.e.y - 30;
  fabricTriangle.left = obj.e.x - 10;
  canvas.renderAll()
});

canvas.on('mouse:out', function(obj) {
  fabricTriangle.top = -100;
  fabricTriangle.left = -100;
  canvas.renderAll()
});

canvas.on('mouse:up', function(obj) {
  canvas.add(fabricTriangle.clone());
  canvas.renderAll();
});

canvas.add(fabricTriangle)

function getfabricTriangle(color) {
  if (!fabricTriangle) {
  //If it is not created then first will create and return..
     return new fabric.Triangle({
      width: 62.5,
      height: 50,
      originX: 'center',
      originY: 'center',
      fill: color
    });
  } /*else {
  //just changing the color of exiting fabric.Triangle...
    fabricTriangle.setFill(color)
  }*/
}

function iconSet() {
  fabricTriangle.setFill(document.querySelector('input[type="radio"]:checked').value)
}

canvas {
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>


Green
<input name="iconType" type="radio" id="green" onclick="iconSet()" value="green" /> 

Yellow
<input name="iconType" type="radio" id="yellow" onclick="iconSet()" value="yellow" /> 

Red
<input name="iconType" type="radio" id="red" onclick="iconSet()" value="red" />

<canvas id="c" width="600" height="600"></canvas>