선택기를 사용하여 캔바스의 객체를 전환하는 방법은 무엇입니까?

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>