此文接着上文看…
SVG的方式
fabric.loadSVGFromURL
function addSVGDraw() {
fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
let oImg = fabric.util.groupSVGElements(objects, options);
oImg.set({
left: 100,
top: 100,
});
canvasContainer.add(oImg);
});
}
呀!看起来有点小,我们现在把宽度放大到200…
function addSVGDraw() {
fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
let oImg = fabric.util.groupSVGElements(objects, options);
oImg.scale(Number(200 / oImg.width));
// oImg.scaleToWidth(200);
oImg.set({
left: 100,
top: 100,
});
canvasContainer.add(oImg);
});
}
旋转 angle & rotate
1、一般情況下旋转是围绕元素的左上角进行旋转的,为了直观地发现变化,我们在背后放一张初始位置的矩形框作为参考。
function addSVGDraw() {
fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
let oImg = fabric.util.groupSVGElements(objects, options);
// oImg.scale(Number(200 / oImg.width));
oImg.scaleToWidth(200);
oImg.set({
left: 300,
top: 300,
angle: 90, // 图片旋转角度
});
// oImg.rotate(90);
const bgRect = new fabric.Rect({
top: 300, // 距离容器顶部 300px
left: 300, // 距离容器左侧 300px
fill: '#FFC258', // 填充色
width: 200,
height: 153,
});
canvasContainer.add(bgRect).add(oImg);
});
}
这分别是旋转0° 90° 180° 270°
2、如果希望围绕元素的中心点进行旋转呢?此处有两种方式:
方式一:设置元素的 originX、oringY 属性为 center,他的原理是改变元素 left、top 设置位置。请看下面示例,背景矩形框没有设置originX、oringY ,将元素设置originX、oringY ,可以直观地看见元素位置会发生了偏移,如果需要存储元素左上角坐标的话就需要重新计算,很繁琐。
function addSVGDraw() {
fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
let oImg = fabric.util.groupSVGElements(objects, options);
// oImg.scale(Number(200 / oImg.width));
oImg.scaleToWidth(200);
oImg.set({
left: 300,
top: 300,
originX: 'center',
originY: 'center',
// angle: 90, // 图片旋转角度
});
const bgRect = new fabric.Rect({
top: 300, // 距离容器顶部 300px
left: 300, // 距离容器左侧 300px
fill: '#FFC258', // 填充色
width: 200,
height: 153,
});
canvasContainer.add(bgRect).add(oImg);
});
}
这分别是未进行旋转和旋转90°
方式二:centeredRotation:如果为true,则该对象在通过控件旋转时将使用中心点作为变换的原点。需要和rotate 结合使用
function addSVGDraw() {
fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
let oImg = fabric.util.groupSVGElements(objects, options);
// oImg.scale(Number(200 / oImg.width));
oImg.scaleToWidth(200);
oImg.set({
left: 300,
top: 300,
});
oImg.centeredRotation = true;
oImg.rotate(90);
const bgRect = new fabric.Rect({
top: 300, // 距离容器顶部 300px
left: 300, // 距离容器左侧 300px
fill: '#FFC258', // 填充色
width: 200,
height: 153,
});
canvasContainer.add(bgRect).add(oImg);
});
}
这分别是旋转0° 90° 180° 270°
Image的方式
fabric.Image.fromURL
function addImageDraw() {
fabric.Image.fromURL(IcRotateA, (oImg) => {
oImg.set({
left: 100,
top: 100,
});
canvasContainer.add(oImg);
});
}
旋转 angle & rotate
Image 方式的旋转和SVG一直,可参考上方案例。
更多操作请看 官方文档