如何选择现有的织物画布答案

【问题标题】：How to select existing fabric canvas如何选择现有的织物画布
【发布时间】：2016-03-31 21:01:58
【问题描述】：

我正在尝试选择现有的织物画布。我尝试了以下代码，但没有成功。

canvas=document.getElementById("imageCanvas").fabric;

实际上，我正在使用织物的多个画布对象。请建议选择在多个画布之间切换并根据选择向多个画布添加文本的方法。我也尝试了以下代码，但它对我不起作用，因为我正在动态创建画布对象。
http://jsfiddle.net/fpHaE/19/

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

我更新了 JS fiddle 代码，您可以使用该代码轻松维护多个画布。

http://jsfiddle.net/upardhi/fpHaE/24/

var activeCanvas, canvas1, canvas2;
var canvasList={}; /* Variable for maintaining the list of canvases*/

$(document).ready(function() {
    canvasList['canvas1'] = new fabric.Canvas('canvas1');
    canvasList['canvas2'] = new fabric.Canvas('canvas2');
    changeView('canvas1');
});

function changeView(value) {
        $('.canvas-container').css('display', 'none');
        $('#'+value).parent().css('display', 'block');
				activeCanvas=canvasList[value]
  
}

function dropText() {
    var text = new fabric.Text('test');
    activeCanvas.add(text);
}

#canvas1{border:1px solid red;}
#canvas2{border:1px solid green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeView('canvas1');">View 1</button>
<button onclick="changeView('canvas2');">View 2</button>
<button onclick="dropText();">Drop Text</button>
<div style="text-align: center">
    <canvas id="canvas1" class="canvas-area"></canvas>
    <canvas id="canvas2" class="canvas-area"></canvas>
</div>

【讨论】：