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
Post a Comment