javascript - Fabric.js:调整矩形大小时出现问题
问题描述
代码:https ://codepen.io/eajithkumar128/pen/poNwJJv?editors=0010
我在使用矩形绘制的画布中有一个类似表格的结构,我在行和列末端绘制了如下线(蓝色线是矩形,红色线是织物线对象)
我试图通过移动线条来调整矩形的大小,每当我移动列线时,我都可以看到整个矩形本身在移动,其中我只是想更新宽度,我还可以看到在它后面绘制一个虚构的矩形它具有正确的宽度,但原始矩形未正确调整大小。请参考下图。
选择行时获取行前后的矩形对象的代码:
canvas.on('selection:created', function(e){
let targetEle = e.target;
initialPosition = e.left;
selectedBoxesLeft = []
selectedBoxesRight = []
canvas.forEachObject((v)=>{
if(v.left+v.width === targetEle.left && v.type==="rect"){
selectedBoxesLeft.push(v);
}
if(v.left === targetEle.left && v.type==="rect"){
selectedBoxesRight.push(v);
}
});
console.log(selectedBoxesLeft);
console.log(selectedBoxesRight);
});
移动时调整大小的代码:
canvas.on('object:moving',function(e){
let target = e.target;
if(target.left < initialPosition){
selectedBoxesLeft.forEach((v)=>{
v.width =target.left - v.left
})
selectedBoxesRight.forEach((v)=>{
let left = v.left
v.left = target.left;
v.width = v.width + (left- target.left)
});
canvas.renderAll()
}else{
// selectedBoxesLeft.forEach((v)=>{
// v.width = v.width + (target.left - v.width)
// })
// selectedBoxesRight.forEach((v)=>{
// // v.width = v.width + (v.left - target.left)
// v.left = target.left;
// v.width = v.width - target.left;
// })
}
});
解决方案
调整矩形大小而不是使用
v.width =target.left - v.left
将其更改为
v.set('width', target.left - v.left)
解决了这个问题
推荐阅读
- forms - Typo3:编辑表单插件使用的电子邮件模板
- matlab - 计算极坐标中的旋转差
- terraform - Terraform - 循环数据源并创建地图,将此地图传递给模块
- xml - 基于 XSLT 2.0 中的关键字在循环中流式传输字符串
- android - 如何使用 Delphi XE 10.3.1 Rio 使 APK 仅适用于 Google Play 商店中的平板电脑?
- twitter-bootstrap - 弹出框内的白名单表
- c++ - 贝尔曼福特实现 C++
- algorithm - 为单源最短路径问题设计一种算法,该算法在时间 O(k(|V|+|E|)) 中运行
- c++ - c++ struct指针和动态分配
- virtualalloc - VirtualAlloc 失败