如何使用fabric.js

我可能失去了一些东西添加滚动条（潜在无限）的画布（我决不是用HTML或CSS的专家，才刚刚用面料起家）。如何使用fabric.js

这似乎是面料是用于创建基于形状（对象）的绘图应用程序一个很好的工具，但我无法弄清楚如何在这样一种方式，用户无法通过将其关闭丧失对象使用它帆布。

没有演示具有任何功能，以防止这一点，但这个似乎将是一个巨大的限制框架。有没有人知道解决这个问题的方法？

基本上，我想允许用户任意对象添加到画布和可用性，这些对象必须被隔开，因此画布将是潜在无限的。显然，画布的交互区域必须具有固定的大小。

任何帮助，得到这个整理将大大apreciated

2014-03-30 DazBaldwin

添加到Benicks答案 - 你可以调用当对象移动时触发canvas.on("object:moving", function(e) {})。所以包装将有follwing CSS：

#wrapper{ 
    position: absolute; 
    overflow: auto; 
    max-height: 600px; 
    max-width: 800px; 
    }

与索引文件：

<div id="wrapper"> 
    <canvas id="c2"></canvas> 
</div>

要扩展画布作为一个对象被拖动到你可以做以下包装的边缘（已完成在咖啡脚本中）：

canvas.on "object:moving", (e) -> 
    currentCanvasHeight = canvas.height 
    currentCanvasWidth = canvas.width 

    # e.target returns the selected canvas object 
    # Once the objects offset left value + the objects width is greater than the canvas 
    # width, expand the canvas width 
    if (e.target.left + e.target.currentWidth) > currentCanvasWidth 
    canvas.setWidth currentCanvasWidth + 50 
    $("#wrapper").scrollLeft e.target.left # scroll alongside the canvas expansion 
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas) # to fix the mouse 
    #position bug issue 

    # do the same for the top 
    if (e.target.top + e.target.currentHeight) > currentCanvasHeight 
    canvas.setHeight currentCanvasHeight + 50 
    $("#wrapper").scrollTop e.target.top 
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas)

来源

2014-04-01 17:10:52

刚才编辑的答案，谢谢Promethean_Sin –

但所有的浏览器（不fabricjs）对画布大小的限制，所以我觉得'canvas.setWidth/setHeight'的通话最终将失败：https：//开头github上。 COM/kangax/fabric.js /问题/ 3821 – Smartkid

我们排序有同样的问题，并通过创建一个视解决。我们围绕canvas div创建了一个div。 <div id="viewport"> <div id="canvas"></div> </div>

CSS：

#viewport { 
    height: 500px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 500px; 
    overflow: auto; 
}

JS创建画布：

var canvas = new fabric.Canvas('canvas'); 
canvas.setWidth(1000); 
canvas.setHeight(1000); 
canvas.renderAll();

现在你应该可以通过在画布上滚动。但是你会意识到你的鼠标位置不正确了。例如，您可以使用canvas.calcOffset（）方法解决该问题，并将其绑定到视口的滚动事件。希望这有助于。

来源

2014-04-01 05:46:20 Benick

感谢您的建议，我实际上更多地考虑限制物品被拖动到左侧或从（0，0）向上的可能性，所以鼠标位置不应该是一个问题 – DazBaldwin

如何使用fabric.js

回答

相关问题