总noob问题。我一直在滥用谷歌,出于某种原因,令人惊讶的是没有找到任何关于这个......?我觉得我在这里错过了一些东西。 :P
我目前有一个resize()函数,可以将画布尺寸修改为窗口大小。在一个最小的例子中(也使用jQuery),我有一个引用我的Shape对象的变量。根据文件,形状对象不包括宽度和宽度。高度属性。调整Shape对象大小的最有效方法是什么?动态删除/重绘?
这就是我所拥有的:
var stage;
var bgColor;
$(document).ready(function(){
init();
});
function init()
{
stage = new createjs.Stage("canvasStage");
bgColor = new createjs.Shape();
bgColor.graphics.beginFill("#000000").drawRect(0,0, stage.canvas.width, stage.canvas.width);
stage.addChild(bgColor);
$(window).resize(function(){windowResize();});
windowResize();
}
function windowResize()
{
stage.canvas.width = $(window).width();
stage.canvas.height = $(window).height();
//bgColor.width = $(window).height();// No width property
//bgColor.height = $(window).height();// NO height property
stage.update();}
答案 0 :(得分:3)
您可以使用形状的scaleX和scaleY来缩放形状。
注意:Shape对象扩展了DisplayObject,因此您可能还需要查看DisplayObject文档以获取更多有用的属性/方法。
myShape.scaleX=1.2;
myShape.scaleY=1.2;
答案 1 :(得分:2)
如@markE所述,只有scaleX和scaleY可用。
解决此问题的方法是实例化宽度为1px且高度为1px的形状:
mc_bg = new createjs.Shape();
mc_bg.graphics.beginFill("#CCCCCC").drawRect(0,0,1,1);
stage.addChild(mc_bg);
mc_left = new createjs.Shape();
mc_left.graphics.beginFill("#333333").drawRect(0,0,1,1);
stage.addChild(mc_left);
mc_circle = new createjs.Shape();
mc_circle.graphics.beginFill("#888888").drawCircle(0,0,1,1);
stage.addChild(mc_circle);
允许在渲染前使用scaleX和scaleY直接使用像素单位设置尺寸而不进行转换:
mc_bg.scaleX = stage_width;
mc_bg.scaleY = stage_height;
mc_left.scaleX = stage_width/2;
mc_left.scaleY = stage_height;
mc_circle.x = stage_width/4;
mc_circle.y = stage_width/4;
mc_circle.scaleX = stage_width/4;
mc_circle.scaleY = stage_width/4;
stage.update();
请参阅窗口调整大小时实时调整大小的小提琴示例:https://jsfiddle.net/jckleinbourg/go3fs1zt/
答案 2 :(得分:0)
改变比例的转换方法 - >尺寸,反之亦然:
function dimToScale(origDim, desiredDim)
{
return desiredDim / origDim;
}
function scaleToDim(origDim, scale)
{
return scale * origDim;
}