Git Product home page Git Product logo

Comments (6)

06wj avatar 06wj commented on May 3, 2024

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

from hilo.

tgxpuisb avatar tgxpuisb commented on May 3, 2024

使用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也没有用,请问实现进度条逐渐消失这个效果还有其他方案么

from hilo.

tgxpuisb avatar tgxpuisb commented on May 3, 2024
        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的值是无法设置的,这与我在使用白鹭引擎的时候有很大不同

from hilo.

06wj avatar 06wj commented on May 3, 2024

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了

from hilo.

tgxpuisb avatar tgxpuisb commented on May 3, 2024

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

from hilo.

06wj avatar 06wj commented on May 3, 2024

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

from hilo.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.