javascript - resolucion - ¿Escala KineticJS Stage con el tamaño del navegador?

detectar resolucion de pantalla jquery

Question

Recientemente descubrí KineticJS mientras intentaba convertir mis habilidades de Flash en HTML Canvas. ¡Es una herramienta extremadamente impresionante! Pregunta: Si estoy usando un front-end como Bootstrap y tengo una página con varios divs que contienen lienzos generados por KineticJS, ¿puedo hacer que esos lienzos se escalen junto con todo lo demás en la página? Muchas gracias.

----- Debido al límite de caracteres de los comentarios, estoy respondiendo en el PO. ---------

¿Lo configuraría para que tenga un tamaño máximo y luego lo escalaría como cuando se escala el navegador? Por ejemplo, en Actionscript lo hice para rastrear el tamaño del navegador y escalar el escenario:

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

Para el beneficio de los refugiados flash (como yo) que están cruzando el límite complejo en tierra HTML5, ¿podría darnos un ejemplo o 2?

Answer 1

¡Por supuesto!

Pero ten cuidado con escalar el elemento del contenedor Kinetic con CSS (como lo hace Bootstrap) porque el navegador cambiará el tamaño al "estirar" los píxeles en lugar de dejar que Kinetic vuelva a dibujar los píxeles.

Como el lienzo html (y, por lo tanto, los objetos cinéticos) son realmente solo píxeles, las advertencias comunes sobre el cambio de tamaño también se aplican al escalar el contenedor cinético.

• Los dibujos se distorsionarán si se escala horizontal y verticalmente por diferentes factores.
• Los dibujos que se amplían / ​​disminuyen por un factor grande pueden obtener los "jaggies".

Una mejor manera de cambiar el tamaño de su etapa cinética es:

• Cambiar el tamaño del elemento contenedor cinético proporcionalmente
• Deje saber a Kinetic que su contenedor está .setWidth tamaño con .setWidth y .setHeight
• Utilice .setScaleX y setScaleY seguido de stage.draw para escalar el escenario y todos sus componentes.

Answer 2

Aquí hay una implementación del método recomendado por markE . También incorpora las técnicas descritas en este artículo sobre el auto-cambio de tamaño de los juegos HTML5 .

Encuentre una demostración funcional aquí: http://jsfiddle.net/klenwell/yLDVz/

var iPadLandscapeDimensions = {
  width: 1024,
  height: 768
};

var KineticScreenAutoSize = (function() {
  var self = {
    $container: null,
    stage: null,
    baseWidth: 0,
    baseHeight: 0
  };

  var init = function(selector, baseWidth, baseHeight) {
    self.$container = $(selector);
    self.baseWidth = baseWidth;
    self.baseHeight = baseHeight;
    initStage();
  };

  var initStage = function($container) {
    self.stage = new Kinetic.Stage({
      container: self.$container.attr(''id''),
      width: self.baseWidth,
      height: self.baseHeight
    });
  };

  /*
   * Screen-Sizing Methods
   */
  var autoSize = function() {
    // Style required for resizeScreen below
    self.$container.css({
      position: ''absolute'',
      left: ''50%'',
      top: ''50%'',
      width: ''100%'',
      height: ''100%''
    });

    // Resize automatically
    window.addEventListener(''resize'', resizeStageToFitScreen, false);
    window.addEventListener(''orientationchange'', resizeStageToFitScreen, false);

    // Resize now
    resized = resizeStageToFitScreen();
  };

  var resizeStageToFitScreen = function() {
    /*
     * Following directions here: https://.com/a/19645405/1093087
     */
    var resized = calculateResize();

    // Resize the kinetic container element proportionally
    resized.cssSettings = {
      left: resized.xToCenter + ''px'',
      top: resized.yToCenter + ''px'',
      width: resized.width,
      height: resized.height,
    }
    self.$container.css(resized.cssSettings);

    // Let Kinetic know its container is resizing with .setWidth and .setHeight
    self.stage.setSize(resized);

    // Use .setScaleX and setScaleY followed by stage.draw to scale the stage
    // and all its components.
    self.stage.scaleX(resized.xScale);
    self.stage.scaleY(resized.yScale);

    self.stage.draw();
    return resized;
  };

  var calculateResize = function() {
    var resized = {
      width: 0,
      height: 0,
      xScale: 0,
      yScale: 0,
      xToCenter: 0,
      yToCenter: 0
    }

    var windowWidth = window.innerWidth,
        windowHeight = window.innerHeight,
        desiredWidthToHeightRatio = self.baseWidth / self.baseHeight,
        currentWidthToHeightRatio = windowWidth / windowHeight;

    if ( currentWidthToHeightRatio > desiredWidthToHeightRatio ) {
      resized.width = windowHeight * desiredWidthToHeightRatio;
      resized.height = windowHeight;
    }
    else {
      resized.width = windowWidth;
      resized.height = windowWidth / desiredWidthToHeightRatio;
    }

    resized.xToCenter = (window.innerWidth - resized.width) / 2;
    resized.yToCenter = (window.innerHeight - resized.height) / 2;
    resized.xScale = resized.width/self.baseWidth,
    resized.yScale = resized.height/self.baseHeight;

    return resized;
  };

  /*
   * Public API
   */
  var publicAPI = {
    init: init,
    stage: function() { return self.stage },
    autoSize: autoSize
  }

  return publicAPI;

})();

// Launch Resize
$(document).ready(function() {
  KineticScreenAutoSize.init(
    ''div#stage-container'',
    iPadLandscapeDimensions.width,
    iPadLandscapeDimensions.height
  );
  KineticScreenAutoSize.autoSize();
});