Html 如何使KineticJS帆布舞台响应
在向页面添加画布元素时,我希望画布及其内容随着浏览器窗口的缩小而缩小 这里似乎有几个问题被问到了,每一个问题我都没有找到我想要的答案。我似乎有一些有用的东西,我想我会把它发布给其他人,让他们去击倒或改进 在这个例子中,我有一个最大宽度为1000px的页面。canvas元素在最大宽度下仅为800px宽 HTML: JavaScript:Html 如何使KineticJS帆布舞台响应,html,canvas,html5-canvas,kineticjs,Html,Canvas,Html5 Canvas,Kineticjs,在向页面添加画布元素时,我希望画布及其内容随着浏览器窗口的缩小而缩小 这里似乎有几个问题被问到了,每一个问题我都没有找到我想要的答案。我似乎有一些有用的东西,我想我会把它发布给其他人,让他们去击倒或改进 在这个例子中,我有一个最大宽度为1000px的页面。canvas元素在最大宽度下仅为800px宽 HTML: JavaScript: var maxStageWidth = 800; var maxStageHeight = 500; var maxPageWidth = 1000; // C
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);
var maxStageWidth=800;
var MaxStageHight=500;
var maxPageWidth=1000;
//检查窗口是否小于所需的宽度,并调用大小调整函数
函数setStageWidth(){
if(window.innerWidth
您的函数似乎没有任何问题。你能解释一下你想做什么吗?你的最大页面宽度和最大舞台宽度不应该是同一个数字吗
您的函数正在做两件事:缩放和调整大小,但您关注的是基于水平变化的缩放。尝试将其更改为对角比例因子或分别缩放垂直和水平
// 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();
};
检查这把小提琴我的想法是有一个页面,其中画布是文档的唯一组成部分,它的一侧会有内容,因此我的任意80%画布/100%页面宽度。这些功能似乎确实适用于它,但作为一个画布新手,我想我会把它放在那里,看看是否有一个“正确”或更有效的方法来做到这一点。在你的小提琴中,它反应灵敏,但它延伸了里面的内容!!这方面有什么改进吗?是的,这是为了扩展内容。如果不想拉伸,请删除标有setAttr且包含“scaleX”和“scaleY”的行
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);
// 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();
};