我有这组 Canvas 和一个将第一个 Canvas 复制到其余 Canvas 的函数。如何使除第一个 Canvas 之外的所有 Canvas 都不可选择/不可编辑?
除了 c0 之外,我尝试向每个 Canvas 添加如下内容,但没有成功:
c1.selection = false;
c1.forEachObject(function(o) {
o.selectable = false;
});
这是我的代码,here's a fiddle of the same :
var canvas = [];
for (i = 0; i <= 7; i++) {
canvas.push(new fabric.Canvas('c' + i));
}
console.dir(canvas);
var rect = new fabric.Rect({
left: 50,
top: 50,
fill: 'blue',
width: 100,
height: 100
});
canvas[0].add(rect);
$('#copyBtn').click(function() {
var json = JSON.stringify(canvas[0]);
for (i = 1; i <= 7; i++) {
canvas[i].loadFromJSON(json);
}
});
body {
margin: 0;
}
canvas {
border: 1px solid #dddddd;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
<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.22/fabric.min.js"></script>
<button id="copyBtn">Copy</button>
<table>
<tr>
<td>
<canvas id="c0" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c1" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c2" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c3" width="208" height="360"></canvas>
</td>
</tr>
<tr>
<td>
<canvas id="c4" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c5" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c6" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c7" width="208" height="360"></canvas>
</td>
</tr>
</table>
最佳答案
如果您不需要任何用户交互,您可以创建 fabric.StaticCanvas 的对象。
演示
var canvas = [];
for (i = 0; i < 7; i++) {
canvas.push(new fabric.Canvas('c' + i));
}
canvas.push(new fabric.StaticCanvas('sc1'));
var rect = new fabric.Rect({
left: 50,
top: 50,
fill: 'blue',
width: 100,
height: 100
});
canvas[0].add(rect);
$('#copyBtn').click(function() {
var json = JSON.stringify(canvas[0]);
for (i = 1; i <= 7; i++) {
canvas[i].loadFromJSON(json);
}
});
body {
margin: 0;
}
canvas {
border: 1px solid #dddddd;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
<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.22/fabric.min.js"></script>
<button id="copyBtn">Copy</button>
<table>
<tr>
<td>
<canvas id="c0" width="208" height="360"></canvas>
</td>
<td>
<div style="width: 208px;height: 360px;position: relative;">
<canvas id="sc1" width="208" height="360"></canvas>
</div>
</td>
<td>
<canvas id="c1" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c2" width="208" height="360"></canvas>
</td>
</tr>
<tr>
<td>
<canvas id="c3" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c4" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c5" width="208" height="360"></canvas>
</td>
<td>
<canvas id="c6" width="208" height="360"></canvas>
</td>
</tr>
</table>
关于javascript - 复制 Canvas 时禁用除 1 个 Canvas 之外的所有 Canvas 上的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48177171/