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

【问题标题】：How to toggle objects on a canvas with selector?如何使用选择器在画布上切换对象？
【发布时间】：2018-05-28 00:51:34
【问题描述】：

我有一个带有 2 个选项的选择器。选项 1 应仅显示 IText，选项 2 不应显示 IText，但应显示图像和一些额外信息（div）。如何使选择器切换画布对象，以便我可以来回切换，而不是让所有内容一次加载？ 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>

【问题讨论】：

标签： javascript jquery canvas fabricjs

【解决方案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>

【讨论】：