javascript - 使用浏览器调整大小来缩放 KineticJS 阶段？

Question

最近发现了 KineticJS，因为我一直在尝试将我的 Flash 技能转换为 HTML Canvas。这是一个非常令人印象深刻的工具!问题:如果我使用的是像 Bootstrap 这样的前端，并且我有一个包含多个包含 KineticJS 生成的 Canvas 的 div 的页面，我能否让这些 Canvas 与页面上的其他所有内容一起缩放？非常感谢。

----- 由于评论的字符限制，我在 OP 中回复。 ----------

您是否可以将其设置为最大尺寸，然后让它在浏览器缩放时缩放？例如，在 Actionscript 中，我这样做是为了跟踪浏览器的大小并缩放舞台:

stageListener.onResize = function():Void {  
    // Calculate % of total allowable change for each dimension  
    var percentWScale:Number = (Stage.width - minStageWSize)/stageWResizeRange;  
    var percentHScale:Number = (Stage.height - minStageHSize)/stageHResizeRange;
    //  Test to see if the stage size is in the rescale range
    if ((Stage.width < maxStageWSize)  || (Stage.height < maxStageHSize))   {
        pfarm.stageChanged = true;
        // Calculate the scale factor for each dimension, but don't go below the minimum
        var percentHScale:Number = Math.max(minimumScale, Stage.width/1024);
        var percentVScale:Number = Math.max(minimumScale, Stage.height/768);
        //trace ("H Scale Factor: "+percentHScale+". V Scale factor: "+percentVScale);
        // Determine which window dimension to use for scaling -
        // Use the one which is the most scaled down from the maximum stage size.
        var getScaleFrom:String = (percentHScale <<  percentVScale)? "hScale" : "vScale";
        // Scale the object
        if (getScaleFrom == "hScale") {
            baseParent._width = projectContentXSize * percentHScale;
            baseParent._height = projectContentYSize * percentHScale;
            } else {
                baseParent._width = projectContentXSize * percentVScale;
                baseParent._height = projectContentYSize * percentVScale;
        }
    } // END RESIZE OF SCROLLPANE CONTENT

为了跨越复杂边界进入 HTML5 领域的闪电难民(像我)的利益，您能提供一个或两个示例吗？

Answer 1

当然可以!

但是，使用 CSS 缩放 Kinetic 容器元素时要小心(就像 Bootstrap 所做的那样)，因为浏览器将通过“拉伸(stretch)”像素而不是让 Kinetic 重绘像素来调整大小。

由于 html Canvas (因此 Kinetic 对象)实际上只是像素，因此在缩放 Kinetic 容器时也适用关于调整大小的常见警告。

• 如果按不同的因素在水平和垂直方向上缩放，绘图将会变形。
• 按较大比例放大/缩小的绘图可能会出现“锯齿”。

调整动力学阶段大小的更好方法是:

• 按比例调整动力学容器元素的大小
• 让 Kinetic 知道它的容器正在使用 .setWidth 和 .setHeight 调整大小
• 使用 .setScaleX 和 setScaleY 然后使用 stage.draw 来缩放舞台及其所有组件。