如何使KineticJS canvas舞台響應

Question

將畫布元素添加到頁面時，我希望畫布及其內容隨着瀏覽器窗口的縮小而縮小。

這里似乎有幾個問題要問，而每個問題我都沒有找到我想要的答案。 我似乎有一些行之有效的方法，並認為我會將其發布給他人，以使其貶低或改善。

在此示例中，我有一個最大寬度為1000px的頁面。 canvas元素的最大寬度只有800px寬。

HTML：

<div id="container"></div>

CSS：

#container {
    background-color: #888888;
    display: inline-block;
    max-width: 1000px;
}

JavaScript的：

var maxStageWidth = 800;
var maxStageHeight = 500;
var maxPageWidth = 1000;

// Check to see if window is less than desired width and calls sizing functions
function setStageWidth() {
    if (window.innerWidth < maxPageWidth) {

        resizeStage();

    } else {

        maxStageSize();

    };
};

// Sets scale and dimensions of stage in relation to window size
function resizeStage() {

    var scalePercentage = window.innerWidth / maxPageWidth;

    stage.setAttr('scaleX', scalePercentage);
    stage.setAttr('scaleY', scalePercentage);
    stage.setAttr('width', maxStageWidth * scalePercentage);
    stage.setAttr('height', maxStageHeight * scalePercentage);
    stage.draw();
};

//Sets scale and dimensions of stage to max settings
function maxStageSize() {
    stage.setAttr('scaleX', 1);
    stage.setAttr('scaleY', 1);
    stage.setAttr('width', maxStageWidth);
    stage.setAttr('height', maxStageHeight);
    stage.draw();
};

var stage = new Kinetic.Stage({
    container: 'container',
    width: maxStageWidth,
    height: maxStageHeight,
    scaleX: 1
});

var circles = new Kinetic.Layer();

var circleRed = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 100,
    stroke: 'black',
    strokeWidth: 2,
    fill: 'red'
});

var circleBlue = new Kinetic.Circle({
    x: stage.getWidth() / 2 + 120,
    y: stage.getHeight() / 2 + 175,
    radius: 50,
    stroke: 'black',
    strokeWidth: 2,
    fill: 'blue'
});

var circleOrange = new Kinetic.Circle({
    x: stage.getWidth() / 2 - 175,
    y: stage.getHeight() / 2 + 100,
    radius: 75,
    stroke: 'black',
    strokeWidth: 2,
    fill: 'orange'
});

circles.add(circleRed);
circles.add(circleBlue);
circles.add(circleOrange);

stage.add(circles);

// On load we set stage size based on window size
setStageWidth();

// On window resize we resize the stage size
window.addEventListener('resize', setStageWidth);

Answer 1

您的功能似乎沒有任何問題。 您能解釋一下您要達到的目標嗎？ 您的最大頁面寬度和最大舞台寬度不應該是相同的數字嗎？

您的功能在做兩件事：縮放和調整大小，但您專注於基於水平變化的縮放。 嘗試將其更改為對角比例因子，或分別縮放垂直和水平比例。

// Sets scale and dimensions of stage in relation to window size
function resizeStage() {

   var horizScalePercentage = window.innerWidth / maxPageWidth; 
   var vertiScalePercentage = window.innerHeight/ maxPageHeight; 

   stage.setAttr('scaleX', horizScalePercentage );
   stage.setAttr('scaleY', vertiScalePercentage );
   stage.setAttr('width', maxStageWidth * horizScalePercentage );
   stage.setAttr('height', maxStageHeight * vertiScalePercentage );
   stage.draw();
};

//Sets scale and dimensions of stage to max settings
function maxStageSize() {
    stage.setAttr('scaleX', 1);
    stage.setAttr('scaleY', 1);
    stage.setAttr('width', maxStageWidth);
    stage.setAttr('height', maxStageHeight);
    stage.draw();
};

http://jsfiddle.net/8cw7J/1/檢查此小提琴