通过调整浏览器大小来缩放KineticJS阶段? [英] Scale KineticJS Stage with Browser Resize?

问题描述

最近，我一直在尝试将Flash技能转换为HTML Canvas时发现KineticJS.这是一个非常令人印象深刻的工具！ 问题: 如果我使用的是Bootstrap之类的前端，并且我的页面上有几个包含KineticJS生成的画布的div，那么我可以使这些画布与页面上的所有其他对象一起缩放吗? 非常感谢.

Recently discovered KineticJS as I've been trying to convert my Flash skills to HTML Canvas. It is an extremely impressive tool! Question: If I'm using a front-end like Bootstrap and I have a page with several divs that contain KineticJS-generated canvases, can I get those canvases to scale along with everything else on the page? Thanks much.

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

----- Due to character limit of comments, I'm replying in the OP. ---------

您是否将其设置为最大大小，然后像浏览器缩放时那样进行缩放? 例如，在Actionscript中，我这样做是为了跟踪浏览器的大小并扩展舞台:

Would you set it up so that there is a maximum size and then have it scale as when the browser is scaled? For example, in Actionscript I did this to track the size of the browser and scale the stage:

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土地的速成难民(像我一样)的利益，您能提供一个例子还是2个例子?

For the benefit of flash refugees (like me) who are crossing the complex border into HTML5 land, could you provide an example or 2?

推荐答案

可以！

但是，请谨慎使用CSS缩放Kinetic容器元素(就像Bootstrap一样)，因为浏览器将通过拉伸"像素而不是让Kinetic重绘像素来调整大小.

But, be careful about scaling the Kinetic container element with CSS (as Bootstrap does) because the browser will resize by "stretching" the pixels rather than letting Kinetic redraw the pixels.

由于html画布(以及因此的Kinetic对象)实际上只是像素，因此在缩放Kinetic容器时，也会出现有关调整大小的常见警告.

Since html canvas (and therefore Kinetic objects) are really just pixels, the common warnings about resizing also apply when scaling the Kinetic container.

• 如果水平和垂直缩放的比例不同，则图纸会变形.
• 按较大比例放大/缩小的图形可能会出现锯齿".

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

A better way to resize your kinetic stage is to:

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

• Resize the kinetic container element proportionally
• Let Kinetic know its container is resizing with .setWidth and .setHeight
• Use .setScaleX and setScaleY followed by stage.draw to scale the stage and all its components.

这篇关于通过调整浏览器大小来缩放KineticJS阶段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！