gpt4 book ai didi

javascript - Canvas :矩形——对齐网格/对齐对象

转载 作者:数据小太阳 更新时间:2023-10-29 04:14:51 24 4
gpt4 key购买 nike

我设法通过以下方式操作 Fabric.js 以向网格功能添加捕捉和缩放:

var grid = 100;
//Snap to Grid
canvas.on('object:moving', function (options) {
options.target.set({
left: Math.round(options.target.left / grid) * grid,
top: Math.round(options.target.top / grid) * grid
});
});
canvas.on('object:scaling', function (options) {
options.target.set({
left: Math.round(options.target.left / grid) * grid,
top: Math.round(options.target.top / grid) * grid
});
});

现在我想添加对齐对象功能。我的想法是检查两个物体的交点,然后以某种方式锁定运动。我知道这不是最好的尝试,但至少它会捕捉到它,但不允许再将物体移开。并且:现在它没有得到很好的实现。请参阅:http://jsfiddle.net/gcollect/y9kyq/

我有三个问题:

  1. “捕捉”效果不佳,因为对象的左属性以某种方式依赖于指针。通过拖动对象并观察我的控件输出进行复制。例如,将红色矩形移动到位置 left:62 时,矩形不与蓝色矩形相交,仍然可以移开。如何重新加载矩形的实际左侧值。由于我对齐网格线,它位于左侧:100 而不是左侧:62。
  2. 知道如何向对象功能添加快照吗?并禁止交叉路口?
  3. 我如何检查 n 个对象而不是两个?

感谢您的评论。

附言:jsfiddle 示例没有显示网格功能的比例,因为它需要在行中进行 Fabric.js 操作:11100

var distroundedforgrid = Math.round(dist/100)*100;      
transform.newScaleX = Math.round((transform.original.scaleX * distroundedforgrid / lastDist)*10)/10;
transform.newScaleY = Math.round((transform.original.scaleY * distroundedforgrid / lastDist)*10)/10;

target.set('scaleX', transform.newScaleX);
target.set('scaleY', transform.newScaleY);
}

最佳答案

对于那些仍然对解决方案感兴趣的人:我在这里解决了:https://stackoverflow.com/a/22649022/3207478参见 jsfiddle:http://jsfiddle.net/gcollect/FD53A/

使用 .oCoords.tl .tr .bl。 .br 解决了它。

关于javascript - Canvas :矩形——对齐网格/对齐对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21385398/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com