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. 基于Nginx的Rtmp流媒体服务器环境搭建

    一.编译安装 wget http://nginx.org/download/nginx-1.4.2.tar.gz wget https://github.com/arut/nginx-rtmp-mod ...

  2. js 编码问题

    //字符转换为UTF-8编码 function encutf8(s1) { var stringArray = new Array(); for(var j=0; j<s1.length;j++ ...

  3. Git 常用命令速查表（三）

    http://blog.csdn.net/sunboy_2050/article/details/7529841

  4. 解决IntelliJ IDEA 创建Maven项目速度慢问题 DarchetypeCatalog

    原因 IDEA根据maven archetype的本质,其实是执行mvn archetype:generate命令,该命令执行时,需要指定一个archetype-catalog.xml文件. 该命令的 ...

  5. 生成R文件

    aapt package -f -m -J H:/workspaces/java_android/Test2/gen -S H:/workspaces/java_android/Test2/res - ...

  6. Java内存回收 - 落日之心的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. ARM-LINUX学习笔记-（虚拟机linux串口终端以及USB程序下载，基于TQ2440）

    昨天安装了ssh服务之后今天在windows上用xshell登陆发现登录不上,原因是使用了virtualbox的NAT模式,在NAT模式下,客户机可以很方便地上网,但是想要链接宿主机就需要打开网络地址 ...

  8. 学习wcf

    链接请看下面 第一部分:http://boytnt.blog.51cto.com/966121/796884 第二部分:http://boytnt.blog.51cto.com/966121/7969 ...

  9. S3C2440的定时器详解

    还包含用于大电流驱动的死区发生器 位预分频器是可编程的,并且按存储在TCFG0和TCFG1寄存器中的加载值来分频PCLK 位递减计数器.当递减计数器到达零时,产生定时器中断请求通知CPU定时器操作已经 ...

  10. win7 下安装 ubuntu 16.04双系统

    Ubuntu 每年发布两个版本,目前最新正式版版本也升到了 16.04.Ubuntu 16.04 开发代号为"Xenial Xerus",为第六个长期支持(LTS)版本,其主要特色 ...