2

我找到了一些关于动态地对divs 进行操作的答案，但没有一个做我想要的。我正在使用Raphaeljs 矢量库，需要一个 div 用于要绘制对象的画布。例如：

<html>
    <head>
        <style>
            #canvas 
            {
                height: 2000px; 
                position: absolute;
                width: 1500px;
            }
        </style>
    </head>
    <body>
        <div id="canvas"></div>
        <!-- some code here -->
    </body>
</html>

在我的 JS 文件中，我执行了以下操作：

var paper = Raphael("canvas"),
    r = paper.rect(100, 100, 100, 100),
    c = paper.circle(500, 500, 80);

现在在我的应用程序上，用户将canvas通过创建像上面显示的对象来填充。但问题是，一旦在画布尺寸之外创建了一个对象，它就不会显示在纸/画布上。rc

我正在尝试将 div 的大小动态放大到高度：3000 像素，宽度：2000 像素。absolute position我找到了一些关于但没有帮助的答案。也可以找到 about div overflow，但这适用于 div 的父元素。任何帮助将不胜感激。

4

1 回答 1

0

您需要做的是调整包含 div 和纸张的大小。在此示例中，我将显示您的圆圈在右下角被裁剪。

当您单击画布时，它将调整大小以显示您的圆圈已正确绘制。

见http://jsfiddle.net/kRzx5/7/

var paper = Raphael("canvas"),
r = paper.rect(100, 100, 100, 100),
c = paper.circle(500, 500, 80);

// size i want to resize to
var w = 1000;
var h = 1000;

var canvas = $('#canvas');
canvas.on('click', function(){
    // resize container
    $(this).css({width: w, height: h});

    // resize paper
    paper.setSize(w, h);
});

在这个例子中，我使用的是任意大小，您可以继续检查每个添加对象的位置和大小，并在检查其边界框时找到 x 和 y 上具有最大值的项目，然后调整到这个大小。因此，纸张将始终适合添加的项目。

于 2013-05-30T21:32:53.957 回答