如何使用选择器在画布上切换对象？

Question

我有一个有2个选项的选择器。选项1应该只显示IText，选项2不应该显示IText但应该显示图像，以及一些额外的信息（div）。如何使选择器切换画布对象，以便我可以来回切换，而不是一次性加载所有内容？ Here is a fiddle of what I have

我使用fabric.js版本1.7.20，如果重要的话。

＆＃13;

＆＃13;

var canvas = new fabric.Canvas('c');
canvas.setHeight(600);
canvas.setWidth(637);

$(function() {
  $('#selector').change(function() {
    $('.options').hide();
    $('#' + $(this).val()).show();
  });
});

// some IText, intended for option one only
canvas.add(new fabric.IText('Some Text That Should Only\nBe Displayed with Option One', {
  left: 175,
  top: 55,
  fontSize: 27,
}));

// frame image, intended for option two only
fabric.Image.fromURL('https://i.imgur.com/DrzSWSa.png', function(img) {
  isImageLoaded = true;
  oImg = img.set({
    selectable: false,
    evented: false,
  }).scale(0.5);
  canvas.add(oImg).renderAll();
  canvas.sendToBack(oImg);
});

＆＃13;

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<Select id="selector">
   <option value="one">Option One</option>
   <option value="two">Option Two</option>
</Select>
<div id="two" class="options" style="display:none">Display with Option 2 Selected</div>

<canvas id="c"></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用visible属性在画布上显示/隐藏结构对象。

http://fabricjs.com/docs/fabric.Object.html#visible

var canvas = new fabric.Canvas('c');
canvas.setHeight(600);
canvas.setWidth(637);
var currentSelection = 'one';
$(function() {
  $('#selector').change(function() {
    currentSelection = $(this).val()
    $('.options').hide();
    $('#' + currentSelection).show();
    canvas.forEachObject(function(obj) {
      obj.visible = (obj.showWith === currentSelection);
    });
    canvas.renderAll();
  });
});



// some IText, intended for option one only
canvas.add(new fabric.IText('Some Text That Should Only\nBe Displayed with Option One', {
  left: 175,
  top: 55,
  fontSize: 27,
  showWith: 'one',
  visible: currentSelection === 'one'
}));

// frame image, intended for option two only
fabric.Image.fromURL('https://i.imgur.com/DrzSWSa.png', function(img) {
  isImageLoaded = true;
  oImg = img.set({
    selectable: false,
    evented: false,
    showWith: 'two',
    visible: currentSelection === 'two'

  }).scale(0.5);
  canvas.add(oImg).renderAll();
  canvas.sendToBack(oImg);
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<Select id="selector">
   <option value="one">Option One</option>
   <option value="two">Option Two</option>
</Select>
<div id="two" class="options" style="display:none">Display with Option 2 Selected</div>

<canvas id="c"></canvas>