使用CSS高度和宽度调整舞台大小

Question

我想在两种定义的显示区域（高度和宽度）上使用dynamicJS：

-在我的JavaScript中，我想拥有任意尺寸以供处理，放置物品等。-在我的CSS中，我希望其他尺寸（独立于JS尺寸）代表真实的显示。

这样做有几个优点：JS的尺寸可以小于实际显示的尺寸，从而使计算更轻便； 或CSS尺寸可以轻松地适应用户屏幕尺寸，而不会影响脚本编制部分...

这在香草JS中很容易做到，将画布的高度和宽度属性用作JS尺寸，并使用CSS高度和宽度作为显示尺寸。

HTML：

<canvas height="10" width="10" id="c"></canvas>

CSS：

#c {
        height:400px;
        width:400px;
    }

但是使用KineticJS，我目前无法做同样的事情。 当我对容器进行此宽度设置时，容器本身也在调整大小，但是Stage却没有（使用Stage或容器的尺寸）。

HTML：

<div height="100" width="100" id="c"></div>

相同的CSS。

示例： http ： //jsfiddle.net/46JCa/

那么，有没有办法用KineticJS做到这一点？

Answer 1

我想你要找的是

stage.setScale(scale);

比例是您要缩放所有内容的比例。 因此，您只需要计算一次，设置一次就可以了（除非您使用多个阶段；然后您要设置所有阶段）。

速度很快，我经常使用此技巧。 实际上，如果需要，或者直接在画布上绘制时，实际上可以独立缩放任何对象。