3

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

----- 由于评论字数限制，我在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 领域的 Flash 难民（如我）的利益，您能否提供一个示例或 2 个示例？

4

2 回答 2

7

当然！

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

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

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

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

  • 按比例调整动力学容器元素的大小
  • 让 Kinetic 知道它的容器正在调整大小，.setWidth并且.setHeight
  • 使用.setScaleX和setScaleY跟随stage.draw缩放舞台及其所有组件。
于 2013-10-28T21:28:29.503 回答
3

这是markE 推荐的方法的实现。它还结合了本文中描述的关于自动调整 HTML5 游戏大小的技术。

在这里找到一个工作演示：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://stackoverflow.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();
});
于 2014-06-25T14:46:37.997 回答