Raphael的transform用法

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index007.js"></script>

</head>

<body>

<div id="container"></div>

</body>

</html>
$(function() {

    initRaphael();

});

function initRaphael(e) {

    var paper = Raphael(0,0,300,300);

    var r1 = paper.rect(20,20,80,40).attr('fill','red');

    var r2 = paper.rect(100,20,80,40).attr('fill','blue');

    var r3 = paper.rect(180,20,80,40).attr('fill','green');

    // 以自己的中心为旋转点进行旋转45度

    r2.attr('transform','R45');

    // 以140,60为旋转点进行旋转90度

    r3.attr('transform','R90,140,60');

    // 移动至50,60点

    r1.attr('transform','T50,60');

    // 再移动一次，结果不会累加，只会是下面的结果覆盖上面的结果；

    // 而且变换的结果是transform="matrix(1,0,0,1,100,60)"，把变换修订为变换矩阵；

    r1.attr('transform','T100,60');

    // transform不影响原来的属性值，这个x还是20

    console.log(r1.attr('x'));

    // s表示放大

    r2.attr('transform','S0.8,0.5');

    // 这样就把所有的transform清空了

//    r1.attr('transform','');

    // 输出<rect x="20" y="20" width="80" height="40" rx="0" ry="0" 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);

}

Raphael的transform用法的更多相关文章

  1. css3动画2（transform用法）

    1.直接写在样式里,比如一个小箭头,transform:rotate(135deg)即可 2.写动画过程,@keyframes和transform和animation组合起来用 写在@keyframe ...

  2. U3D Transform用法

    最近在学习unity3d,下面对Transform类做一个小结 一.常用属性和方法 1.1 常用属性: 用代码展示一下上面的一些属性,值得注意的是myCube是mySphere的父物体 using U ...

  3. raphael入门到精通---入门篇之总览

    什么是Raphael raphael.js是一小巧的javascript库,它可以在web上画矢量图简化你的工作,如果你想创建你指定的图表,图形区域或者可移动的组件,那么就使用raphael吧 话不多 ...

  4. 也谈谈Unity的transform使用

    一.Transform和transform 我们来详谈Unity的transform使用,这里所说的tansform不是类UnityEngine命名空间下的Transform,而是transform. ...

  5. Akka（7）： FSM：通过状态变化来转换运算行为

    在上篇讨论里我们提到了become/unbecome.由于它们本质上是堆栈操作,所以只能在较少的状态切换下才能保证堆栈操作的协调及维持程序的清晰逻辑.对于比较复杂的程序流程,Akka提供了FSM:一种 ...

  6. CSS布局方案

    居中布局 水平居中 1)使用inline-block+text-align 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中. 用法:对子框设置display:inli ...

  7. CSS 居中布局

    来源:http://www.cnblogs.com/QianBoy/p/8539077.html 水平居中 1)使用inline-block+text-align 原理:先将子框由块级元素改变为行内块 ...

  8. css3 制作一个遮罩

    思路:1.显示两块图片,2.图片区域(初始隐藏),3.鼠标移入,遮罩显示,此时遮住图片,4.鼠标移出,遮罩恢复初始状态 用到两个css3 属性:transtion ,transform 用法: 1. ...

  9. STL学习笔记（变动性算法）

    本节描述的算法会变动区间内的元素内容.有两种方法可以变动元素内容: 1.运用迭代器遍历序列的过程中,直接加以变动 2.将元素从源区间赋值到目标区间的过程中加以变动 复制(copy)元素 OutputI ...

随机推荐

  1. C# 开发技巧]如何防止程序多次运行 线程 进程

    程序员必有一些好习惯,我的就是看到好文章就收下 文章来源   http://www.cnblogs.com/zhili/p/OnlyInstance.html 转载请注明出处 最近发现很多人在论坛中问 ...

  2. ［iOS开发］WKWebView加载JS

    最近项目要用webView加载js文件,挺同事说WKWebView比UIWebView更加好用,于是我今天就试试,百度一发,自己写了个demo. 先看我写的代码,然后再来看WKWebView跟UIWe ...

  3. tomcat webdav

    <servlet> <servlet-name>webdav</servlet-name> <servlet-class>org.apache.cata ...

  4. HDU 1317(Floyd判断连通性+spfa判断正环)

    XYZZY Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  5. log4cxx第三篇----使用多个logger

    使用多个logger时,所有logger的配置写在一个配置文件里面 两个例子: 1 一个继承的例子(http://logging.apache.org/log4cxx/) // file com/fo ...

  6. lwip移植到stm32上-enc28j60，103mcu（2）

    前面小玩了一下ucos和lwip,但是都还不是真正的网络多任务,真正的网络多任务应该是什么样子的呢?应该是有一个专门的任务负责网络的通讯,他负责将数据发送出去,将数据接收回来,而其他的需要用到网络的任 ...

  7. jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...

  8. 在阿里云ECS（CentOS6.5）上安装tomcat

    切换到你要安装的目录下 命令: cd /home/ 下载你要安装的tomcat 命令: wget http://mirror.bit.edu.cn/apache/tomcat/tomcat-7/v7. ...

  9. iOS 代码实现获得应用的版本号（Version／Build）

    http://www.open-open.com/lib/view/open1411817778203.html

  10. IOS之富文本编辑

    之前做项目时遇到一个问题:          使用UITextView显示一段电影的简介,由于字数比较多,所以字体设置的很小,行间距和段间距也很小,一大段文字挤在一起看起来很别扭,想要把行间距调大,结 ...