javascript - 如何使用选择器切换 Canvas 上的对象？

Question

我有一个带有 2 个选项的选择器。选项 1 应仅显示 IText，选项 2 不应显示 IText，但应显示图像和一些额外信息(div)。我怎样才能让选择器切换 Canvas 对象，以便我可以来回切换，而不是让所有东西都按原样加载？ Here is a fiddle of what I have .

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

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);
});

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>

Answer 1

您可以使用 visible 属性在 Canvas 上显示/隐藏织物对象。

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>