我正在尝试为我的Fabric.js画布添加撤消/重做功能.我的想法是有一个计数器来计算画布修改(现在它计算对象的添加).我有一个状态数组,它将整个画布作为JSON推送到我的数组.

然后我只想回忆起各州

canvas.loadFromJSON(state[state.length - 1 + ctr],

当用户点击undo时,ctr将减1并将状态加载到数组之外; 当用户点击重做时,ctr将增加1并将状态加载到数组之外.

当我用简单的数字体验这一点时,一切正常.使用真正的面料帆布,我遇到了一些麻烦 - >它不起作用.我认为这取决于我的事件处理程序

canvas.on({
   'object:added': countmods
});

jsfiddle在这里:

这里是工作数字唯一的例子(结果见控制台):jsFiddle

我的目标是防止FabricJS画布中的两个或多个矩形重叠.

想象一下两个矩形,它们具有位置和大小的信息,您可以在画布内拖放任何矩形.

如果矩形A足够接近矩形B,则矩形A的位置应该捕捉到矩形B的边缘.这应该适用于矩形B的任何边缘.顶点不必匹配,因为矩形的大小是可变的.

我有一个在一个维度(x轴)上捕捉的工作示例.

我最好的jsfiddle尝试

见jsfiddle.

但我需要它来处理两个维度上的矩形.我很确定,我的代码不足以管理它.

代码片段可能会有所帮助:

object.oCoords.tl.x //top-left corner x position. similar goes for top-right (tr), bottom-left (bl), bottom-right (br) and .y for y-position
mouse_pos = canvas.getPointer(e.e);
mouse_pos.x //pointer x.position
mouse_pos.y //pointer y.position
object.intersectsWithObject(targ) // object = dragged rectangle, targ = targeted rectangle

捕捉应适用于无限量的对象(不仅适用于两个矩形).

我设法通过以下方式操作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. "snap"不能很好地工作,因为对象left属性以某种方式依赖于指针.通过拖动对象并观察我的控件输出进行复制.例如,当将红色矩形移动到左侧位置时:62,矩形不与蓝色矩形相交,仍然可以移开.如何重新加载矩形的实际左值.由于我对网格线的捕捉,它在左边:100而不是左边:62.
2. 知道如何添加对象功能的快照吗？并禁止交集？
3. 如何检查n个对象,而不仅仅是两个？

感谢您的意见.

PS: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);
    }

有没有办法让浏览器调整Fabric.js画布大小以在任何设备上启用相同的结果？我在谈论响应式设计.

有没有代码示例？

我正在尝试实现小型在线绘图和图像工具.出于这个原因,我喜欢使用面料.在我的程序中,我想将画布发送到PHP.或者我想将画布保存为web目录中的jpeg图像.

如何将画布的结果保存或导出为图像.

我有一个带有交互式画布的应用程序，想要在用户退出页面之前在其上保存更改。

我的方法

      function saveBeforeUnload(){ 
         if (confirm('Do you want to save the current state to clipboard?')) {
        /*yes*/  if (canvas.getObjects("rect").length > 0){
                    localStorage.setItem("clipboard_unfinishedconfig", JSON.stringify(canvas.toJSON(customProperties)));
                    return;
        /*no:*/  } else { 
                   localStorage.setItem("clipboard_unfinishedconfig", "");
                return;
            }
      }

我叫它

    window.onbeforeunload = saveBeforeUnload;

如果用户想使用当前配置对localStorage项进行操作，我需要完成的是是/否确认。

问题

使用我的代码，确认不会出现。因此，localStorage为空...控制台显示“阻止确认...”

我有一个很长的字符串，如果它超过 100 个字符，希望将其分割成 +/- 100 个字符的片段，否则不会。\n这意味着我有这个字符串：

字符串输入

"asld as\xc3\xb6 \xc3\xb6asdn askdn asklcanscklans cakslcna acsklcnasclk ncaslkcnas casld as\xc3\xb6 \xc3\xb6asdn askdn asklcanscklans cakslcna acsklcnasclk ncaslkcnas c"\n

并需要其中的两个字符串

1: "asld as\xc3\xb6 \xc3\xb6asdn askdn asklcanscklans cakslcna acsklcnasclk ncaslkcnas casld as\xc3\xb6 \xc3\xb6asdn askdn asklcanscklans"\n2: "cakslcna acsklcnasclk ncaslkcnas c"\n

正如您所看到的，我需要在第一个空格之后、第 100 个字符之后将它们分开。

我不知道如何使用 .split() 做到这一点

我正在画布上绘制 n 个矩形。矩形是可拖动和可缩放的。我想防止它们重叠或相交。最好的情况是，如果它们只是相互咬合。

我想办法检查一下十字路口。在我的示例中，我将触摸对象的不透明度设置为 0.1。

巧合的是，在我尝试解决这个问题时，我的对象在接触另一个对象时无法释放。请参阅http://jsfiddle.net/gcollect/jZw7P/ 这是因为第91行，警报没有执行。 alert(math.abs(distx));

实际上这是一种解决方案，但绝对不是一个优雅的解决方案。

有任何想法吗？