...

View Full Version : can canvas transform image like this?



henry42
07-25-2011, 12:00 PM
i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas?

( left side is the source)
http://manxiaoqu.com/tmp/4b6d187ag7367a9fe2bc2&690.jpg

jonjo
07-25-2011, 01:52 PM
Probably with CSS3

henry42
07-25-2011, 06:20 PM
Probably with CSS3
can u give me an example? thx

jonjo
07-26-2011, 09:20 AM
Here it is (http://www.w3schools.com/css3/css3_2dtransforms.asp)

henry42
07-26-2011, 10:43 AM
Here it is (http://www.w3schools.com/css3/css3_2dtransforms.asp)
i know what the css3 can do , seems it can not carry out the effect i want

devnull69
07-26-2011, 11:00 AM
Please refer to http://www.codingforums.com/showthread.php?t=231825 for answers to a similar request

henry42
07-27-2011, 04:37 AM
Please refer to http://www.codingforums.com/showthread.php?t=231825 for answers to a similar request

i do not think it's a solution or i do not understand it.
the css3 and canvas can transform an image from single direction just like the examples , but what i want is not ( see the picture above )
can u give me some codes about it?
thx.

Benjammin
07-29-2011, 01:20 AM
i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas?

CSS3 transformations use affine transformation (http://en.wikipedia.org/wiki/Affine_transformation) matrices (see also (http://en.wikipedia.org/wiki/Transformation_matrix)). They support rotation, scaling, shearing and translation. This means all lines must stay parallel.

Your example shows 3D projection, which unfortunately is not supported in CSS3. However there are hacks (http://ericlin2.tripod.com/skewComp/skewCompt.html) to create the illusion of perspective.

henry42
08-02-2011, 12:22 PM
seems there is no solution >_<

VIPStephan
08-02-2011, 03:06 PM
Henry, note post #8 which was set to a “moderated” state and wasn’t visible for that reason (I’ve approved the post to make it public).

rnd me
08-02-2011, 05:58 PM
the css3 and canvas can transform an image from single direction just like the examples , but what i want is not ( see the picture above )


that's not true; you can stack up transformations. you can use the matrix to do a lot of things at once, if you know how all that works...


https://developer.mozilla.org/en/CSS/-moz-transform


you can of course use canvas transforms: https://developer.mozilla.org/en/Canvas_tutorial/Transformations#Transforms

henry42
08-03-2011, 08:36 AM
thank u all , i think the #8 is what i want !
although css3 is powerful , it does not support 3d right now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum