关于Graphics绘制出的矩形宽高无法改变的问题

[tgxpuisb]

var countdown = new H.Graphics(); countdown.beginFill('#f00'); countdown.drawRect(100,10,400,30); countdown.endFill(); console.log(countdown); this.addChild(countdown); Main.ticker.addTick(H.Tween); H.Tween.to(countdown,{ width : 10, rotation : 20, height : 10, alpha : 5 },{ duration : 1000 }); 我尝试去改变图形的宽高,但是发现没有效果,alpha和rotation都是可以改变,是系统设定就这样的么

[06wj]

可以通过scaleX和scaleY来改变宽高，Hilo里宽高是指原始图形大小

[tgxpuisb]

使用ScaleX是可以,但是我无法控制只有一边变小,整个Rect都会在scale中向左边偏移 var countdown = new H.Graphics({alpha : 0.5,scaleX : 1}); countdown.beginFill('#f00'); countdown.drawRect(200,10,400,10); countdown.endFill(); this.addChild(countdown); var ticker = new H.Ticker(1); countdown.tick = function(){ console.log(countdown.x); countdown.scaleX -= 0.02; console.log(countdown.scaleX); } ticker.addTick(countdown); ticker.start();

我不知道是因为我的写法不对还是其他原因,求指教,我想做一个进度条逐渐消失的效果,但是矩形会在缩小的同时向左边偏移,即使设置了pivotX和pivotY也没有用,请问实现进度条逐渐消失这个效果还有其他方案么

[tgxpuisb]

        var countdown = new H.Graphics({alpha : 0.5,scaleX : 1});
        countdown.beginFill('#f00');
        countdown.drawRect(200,10,400,10);
        countdown.endFill();
        this.addChild(countdown);
        var ticker = new H.Ticker(1);
        countdown.tick = function(){
            console.log(countdown);
            countdown.x += 4;
            countdown.scaleX -= 0.02;
            console.log(countdown.scaleX);
            //使用缩放时,需要移动countdown的X的值  偏差为scaleX * left
        }
        ticker.addTick(countdown);
        ticker.start();

最后用这样的方法解决了,就是略微感觉有点不优雅,不知道为什么width的值是无法设置的,这与我在使用白鹭引擎的时候有很大不同

[06wj]

http://runjs.cn/detail/6qaqyeke

可以x设置200，drawRect时从0开始画

var countdown = new H.Graphics({alpha : 0.5,scaleX : 1,x:200});
        countdown.beginFill('#f00');
        countdown.drawRect(0,10,400,10);
        countdown.endFill();
        this.addChild(countdown);
        var ticker = new H.Ticker(1);
        countdown.tick = function(){
            console.log(countdown);
            countdown.scaleX -= 0.02;
            console.log(countdown.scaleX);
            //使用缩放时,需要移动countdown的X的值  偏差为scaleX * left
        }
        ticker.addTick(countdown);
        ticker.start();

或者设置pivotX为200

var countdown = new H.Graphics({alpha : 0.5,scaleX : 1,x:200,pivotX:200});
        countdown.beginFill('#f00');
        countdown.drawRect(200,10,400,10);
        countdown.endFill();
        this.addChild(countdown);
        var ticker = new H.Ticker(1);
        countdown.tick = function(){
            console.log(countdown);
            countdown.scaleX -= 0.02;
            console.log(countdown.scaleX);
            //使用缩放时,需要移动countdown的X的值  偏差为scaleX * left
        }
        ticker.addTick(countdown);
        ticker.start();

推荐第一种方案直接把矩形画在x为0处，然后通过x设置200来位移进度条

设置width和设置scaleX是两个有冲突的操作 比如你要显示一张图片原始宽为100的图片，如果你设置width为200其实就是scaleX设置为2了

[tgxpuisb]

恩,你的方法更好一些,谢谢了. 另外就是文档只讲述了方法,很多细节以及参数使用需要看源码才能大概了解,但是在用的时候又担心没有遵守规范.建议可以丰富下文档,写一些示范代码,以及最佳实践之类的

[06wj]

感谢建议 我们会完善文档增加教程的 :)