canvas - 如何将图像从一个织物画布复制到另一个大织物画布的一部分?
问题描述
我想将多个画布图像组合成一个巨型画布,其中所有这些来自不同织物画布的单个图像排列在不同的位置。换句话说,我想将多幅画布拼接成一个巨型画布。有没有一种方法可以指定要从源画布传输到目标画布的图像数据,还可以指定我希望在目标画布中传输的位置?
解决方案
使用 序列化画布中的所有对象toJSON()
。然后你可以使用fabric.util.enlivenObjects来加载你的巨型画布。
演示
var canvas1 = new fabric.Canvas('c1');
var canvas2 = new fabric.Canvas('c2');
var canvas3 = new fabric.Canvas('c3');
canvas1.add(new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: '#4169e1'
}));
canvas2.add(new fabric.Rect({
left: 30,
top: 40,
width: 50,
height: 50,
fill: '#113232'
}));
function mergeToCanvas(){
var json1 = [],json2 = [];
canvas1.getObjects().map(function(x){
json1.push(x.toJSON());
});
canvas2.getObjects().map(function(x){
json2.push(x.toJSON());
});
canvas3.clear();
fabric.util.enlivenObjects(json1, function(objects) {
canvas3.add(...objects);
});
fabric.util.enlivenObjects(json2, function(objects) {
canvas3.add(...objects);
});
}
canvas {
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c1" width="200" height="100"></canvas>
<canvas id="c2" width="200" height="100"></canvas>
<br>
<button onclick='mergeToCanvas()'>mergeToCanvas</button> <br>
<canvas id="c3" width="200" height="200"></canvas>
推荐阅读
- php - 编辑特定产品
- angular - 如何在ionic 3中选择多个图像和视频
- php - php htaccess 重写失败
- vba - 在 Powerpoint 上的固定位置之间同时进行多形状旋转
- c# - 如何统一分配随机颜色?
- node.js - 如何检查mysql连接是否有效
- javascript - IONIC 5 / Angular 9 在原生构建中延迟加载特定组件
- sql - Oracle SQL - WHERE 子句
- swift - 如何为 UIViewController.view 中也具有 UITapGestureRecognizer 的 UIView 挑选和操作 UITapGestureRecognizer?
- azure - 创建具有受限权限的 kubeconfig