html5 canvas - KineticJS Image Flip - Preserve coordinates and dimensions -


i'm looking in library images position. i'm working v4.5.1.

it appears in drawfunction images placed @ (0, 0). here excerpt kinetic.image::drawfunction()

// if cropping if(crop) {     cropx = crop.x || 0;     cropy = crop.y || 0;     cropwidth = crop.width || 0;     cropheight = crop.height || 0;     params = [image, cropx, cropy, cropwidth, cropheight, 0, 0, width, height]; } // no cropping else {     params = [image, 0, 0, width, height]; } 

how positioned?

i'm asking because want flip images , looks there no method that.

i know there various ways it. i'm setting scale -1, end having translate coordinates flipped image. don't want modify coordinates or dimensions in object attributes.

i'm using kinetic foundation larger project , kinetic classes used base classes. override right method , either re-implement account scale , translate before draw or pass translated values.

​any great help. thanks!

~micah

to flip image, can apply negative scale, this:

var img = new kinetic.image({   x: 50,   y: 20,   width: 100,   height: 50,   image: flipperimage,   offsetx: 25,   scalex: -1 }); 

this flip image in x direction (about y axis). can of course use technique shape, groups, layers, , entire stage. adjust axis of rotation, set shape offset.

here's animated example:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-scale-animation-tutorial/

the red hexagon flipped y axis.


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -