Transform usage of Raphael
<%@ Page Language="Java"ContentType="text/html; Charset=utf-8"pageencoding="UTF-8"%><% StringPath=Request.getcontextpath (); StringBasePath=Request.getscheme ()+ "://" +Request.getservername ()+ ":" +Request.getserverport ()+Path+ "/";%><!DOCTYPE HTML><HTML><Head><Basehref= "<%=basePath%>"><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Title</title><Scripttype= "Text/javascript"src= "Js/jquery-1.11.1.js"></Script><Scripttype= "Text/javascript"src= "Js/raphael.js"></Script><Scripttype= "Text/javascript"src= "Js/index007.js"></Script></Head><Body><DivID= "Container"></Div></Body></HTML>
$(function() {Initraphael ();});functionInitraphael (e) {varpaper = Raphael (0,0,300,300); varR1 = Paper.rect (20,20,80,40). attr (' Fill ', ' Red '); varr2 = Paper.rect (100,20,80,40). attr (' Fill ', ' Blue '); varR3 = Paper.rect (180,20,80,40). attr (' Fill ', ' green '); //rotate 45 degrees at the center of the rotation.R2.attr (' transform ', ' R45 '); //rotate 90 degrees with 140,60 as rotation pointR3.attr (' transform ', ' r90,140,60 '); //move to 50, 60 pointsR1.attr (' transform ', ' t50,60 '); //move again, the results will not accumulate, will only be the following results cover the above results; //and the result of the transformation is transform= "Matrix (1,0,0,1,100,60)", transform the transformation into a transformation matrix;R1.attr (' transform ', ' t100,60 '); //transform does not affect the original attribute value, this x is stillConsole.log (R1.attr (' x ')); //s means amplificationR2.attr (' transform ', ' s0.8,0.5 '); //so we can clear all the transform.//r1.attr (' transform ', '); //output <rect x= "0" y= "width=" "height=" + "rx=" 0 "ry=" fill= "#ff0000" stroke= "#000" style= "- Webkit-tap-highlight-color:rgba (0, 0, 0, 0); "transform=" Matrix (1,0,0,1,0,0) ></rect>Console.log (R1.node);}
Transform usage of Raphael