在kineticJS中翻转图像?

con*_*kus 3 javascript image kineticjs

我的代码中有一个图像,如此处所定义

    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";
Run Code Online (Sandbox Code Playgroud)

而且我希望能够在跑步的某些时候翻转(水平).我试图将图像源更改为预先翻转的图像源,但这导致了图像复制,重置位置和大量内容的许多问题.有没有一种方法来翻转以这种方式创建和使用的图像?谢谢!

ran*_*ast 10

这可能是你想要的:

//imageF.scale.y =-1;
imageF.scale.x =-1;
Run Code Online (Sandbox Code Playgroud)

它在这里展示: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}); (5认同)