セレクタでキャンバス上のオブジェクトを切り替える方法は？

Question

私には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>

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>