javascript - Centering and scaling canvas object inside another canvas object by width/height in Fabric.js
问题描述
Goal: To center an object (horizontally and vertically) inside another object (rectangle or group) on canvas
via Fabric.js
or via Javascript which keeps the original object aspect ratio the same, but also not exceed the parent object width/height proportions?
The parent object (rectangle or group) won't be centered on the canvas
element.
Here's the code I have so far: https://stackblitz.com/edit/angular-my8hky
My app.component.ts
so far:
canvas: fabric.Canvas;
ngOnInit() {
this.canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 100,
top: 50,
width: 300,
height: 200,
fill: '#eee'
});
this.canvas.add(rect);
fabric.Image.fromURL('https://angular.io/assets/images/logos/angular/logo-nav@2x.png', (img) => {
let bounds = rect.getBoundingRect();
let oImg = img.set({
left: bounds.left,
top: bounds.top,
width: rect.width
}).scale(1);
this.canvas.add(oImg).renderAll();
});
}
Not only is the new object not centered vertically, but also not centered horizontally if the rectangle object height is decreased (for example to 50px
in height).
I realize I'm only declaring the inner image object width to be the same as the parent rectangle boundary width.
Current solution:
Parent rectangle width: 300
and height: 200
:
Parent rectangle width: 300
and height: 50
:
Desired solution:
Parent rectangle width: 300
and height: 200
:
Parent rectangle width: 300
and height: 50
:
Can anyone assist?
解决方案
想通了.. 这是 StackBlitz: https ://stackblitz.com/edit/angular-pg4fis
诀窍是首先将矩形添加到Fabric
组中,如下所示:
var rect = new fabric.Rect({
left: 100,
top: 50,
width: 450,
height: 200,
fill: '#e3e3e3',
});
var rectGroup = new fabric.Group([rect], {
name: 'Rectangle',
});
this.canvas.add(rectGroup);
然后,我能够建立父(组)元素边界并使用可变比例因子通过Math
功能设置图像:
fabric.Image.fromURL('https://angular.io/assets/images/logos/angular/logo-nav@2x.png', (img) => {
let bounds = rectGroup.getBoundingRect();
const scaleFactor = Math.min(
Math.min(1, bounds.width / img.width),
Math.min(1, bounds.height / img.height)
);
img.scale(scaleFactor);
img.set({
top: bounds.top + Math.max(bounds.height - img.height * scaleFactor, 0)/2,
left: bounds.left + Math.max(bounds.width - img.width * scaleFactor, 0)/2,
});
rectGroup.addWithUpdate(img);
this.canvas.renderAll();
});
推荐阅读
- sql - PostgreSQL 等效于 SQL Server 的 IDENTITY(1, 2)
- asp.net - Asp.Net 读取/写入 Azure 数据湖和 Azure SQL Server
- heroku - 我该如何解决这个heroku自动部署问题
- java - 正则表达式“和”运算符
- excel - Windows 10 IE 不能使用旧的 VBA 代码
- scala - Spark:将选项列添加到 DataFrame
- typescript - 如果我为从 API 返回的数据创建接口。我如何处理它可能被改变的可能性?
- jmeter - 收集 SSH 侦听器数据/Jmeter 延迟以收集侦听器数据时的问题
- android - 在 Android Studio 中构建 Unity 项目的问题
- javascript - 提交帖子请求并点击另一个帖子请求后,如何保持在同一页面上?