如何使KineticJS畫布舞臺響應

Question

將畫布元素添加到頁面時我希望畫布及其內容在瀏覽器窗口縮小時縮小比例。

在這裏似乎有幾個問題關於這個，每個我都沒有找到我正在尋找的答案。我似乎有一些工作，並認爲我會張貼給其他人擊落或改善。

在這個例子中，我有一個最大寬度爲1000px的頁面。畫布元素在最大寬度上只有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/檢查這個小提琴