Question

我找到了一些关于向div动态执行操作的答案，但没有一个能达到我想要的效果。我正在使用 Raphael js矢量库，并且需要一个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和r等对象来填充 c 。但问题是，一旦在画布的尺寸之外创建了一个对象，它就不会在纸/画布上显示出来。

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

Answer 1

您需要做的是调整包含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上具有最大值的项目，然后调整大小对此。因此，纸张将始终适合添加的项目。

如何动态调整div的大小？

1 个答案: