【问题标题】:Flipping an image in kineticJS?在 kineticJS 中翻转图像?
【发布时间】:2012-03-20 12:25:03
【问题描述】:

我的代码中有一张图片,如此处所定义

    var imageObj = new Image();
imageObj.onload = function(){
    imageF = new Kinetic.Image({
        x: 0,
        y: 0,
        scale: (100,100),
        image: imageObj,
        name: "fluffy",
    });
    layer.add(imageF);  
    stage.add(layer);
    stage.start();
    }
imageObj.src = "Flutter_Fluffy_100.png";

而且我希望它能够在运行中的特定时间翻转(水平)。我试图将图像源更改为预先翻转的图像源,但这导致了图像复制、重置位置和很多东西的很多问题。有没有一种方法可以翻转以这种方式创建和使用的图像?谢谢!

【问题讨论】:

    标签: javascript image kineticjs


    【解决方案1】:

    这可能就是你想要的:

    //imageF.scale.y =-1;
    imageF.scale.x =-1;
    

    这里展示了: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-scale-animation-tutorial/

    图像几乎相同: http://randompast.github.io/randomtests/kineticjs/FlipImage-Demo.html

    编辑:固定链接

    【讨论】:

    • 为了避免混淆,我想提一下,自从发布此答案以来,KineticJS API 发生了一些变化。您可以像这样设置水平比例: imageF.setScale({x:-1});
    猜你喜欢
    • 2014-04-28
    • 2015-12-13
    • 2011-08-02
    • 2012-07-06
    • 2019-01-26
    • 1970-01-01
    • 2012-01-14
    • 1970-01-01
    • 2014-10-28
    相关资源
    最近更新 更多