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. HDU 2897 邂逅明下（巴什博奕变形）

    巴什博奕的变形,与以往巴什博奕不同的是,这里给出了上界和下界,原先是(1,m),现在是(p,q),但是原理还是一样的,解释如下: 假设先取者为A,后取者为B,初始状态下有石子n个,除最后一次外其他每次 ...

  2. 我的第一个Android项目之环境搭建

    开发IDE Android Studio2.0 + Genymotion + JDK1.8 网盘地址:http://pan.baidu.com/s/1kUSVqaN Android Studio 我的 ...

  3. Struts2--中文问题

    有中文的情况下, form method都要用post: 如果jsp输入中文返回到后台action输出时会显示乱码, struts.xml已经设置 <constant name="st ...

  4. PAT 天梯赛 L2-004 这是二叉搜索树吗？

    递归判断+建树 题目链接:https://www.patest.cn/contests/gplt/L2-004 题解 二叉搜索树的特点就是其根节点的值是位于左右子树之间的,即大于左子树的所有值,但是小 ...

  5. Ext4.1 , #Ext4.2

    在类中定义url 和 在参数中定义url不同 Ext4.1 和 Ext4.2 处理上有较大的区别

  6. [iOS]C语言技术视频-01-变量的定义

    下载地址: 链接: http://pan.baidu.com/s/1eQJaVwY 密码: c7j8

  7. 好用的消息对话框-TipsWindown

    TipsWindow的官网地址为:http://leotheme.cn/javascript/jquery-plugins-tipswindow-2-0.html 这个是一个爱好者维护的!在这里感谢这 ...

  8. 约瑟夫环（java面向对象实现）

    /* * 作者:zhaop * 功能:约瑟夫环 * */ public class Joseph { public static void main(String[] args) { // TODO ...

  9. PHP学习笔记-session

    session 在windows中的默认保存在AppDate/Local/Temp

  10. RAC（ReactiveCocoa）

    什么是 ReactiveCocoa ReactiveCocoa(其简称为 RAC)是由 Github 开源的一个应用于 iOS 和 OS X 开发的新框架.RAC 具有函数式编程和响应式编程的特性.它 ...