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. linux安装安卓开发工具android studio

    http://www.android-studio.org/ http://android-studio.org/index.php/docs/guide 最近要接触android编程,本来想装ecl ...

  2. TCP与UDP的区别(转)

    源:http://blog.chinaunix.net/uid-20745340-id-1878774.html 参考:TCP协议与UDP协议的区别 TCP与UDP的区别 中国移动.中国联通推行的GP ...

  3. go get 代理设置

    前提: 假设安装好git 我的FQ方式(也可以使用别的方式): 使用 ishadowsocks方式FQ 临时设置Windows下代理: 在控制台执行如下命令,后面的的代理值根据你具体的代理进行设置 s ...

  4. 通过条件注释<!--[if IE]><!-->判断浏览器

    有时我们会在网站头部看到: <!--[if IE 7]> <![endif]--> 或者 <!--[if lt IE 9]> <![endif]--> ...

  5. CentOS 6.4 x64 zabbix 2.2.2 编译安装

    A. 服务端安装配置 1.下载zabbix 2.x 最新版本 http://www.zabbix.com/download.php 2.安装配置所需要软件(zabbix需要一个lamp环境) 使用 y ...

  6. Ubuntu Apache2 配置解析

    转自:http://www.cnblogs.com/ylan2009/archive/2012/02/25/2368028.html   Ubuntu的Apache 2.4 之后的版本的配置文件是 / ...

  7. (简单) POJ 2352 Stars，Treap。

    Description Astronomers often examine star maps where stars are represented by points on a plane and ...

  8. jquery toggle 替换的实现

    $('#example').click(function(){$("#exampleBox").toggle();}) 改为 $('#example').click(functio ...

  9. 关于LCD以及BMP和RGB565

    源: 关于LCD以及BMP和RGB565

  10. 8、手把手教你Extjs5（八）自定义菜单2

    这一节来定义另外三种类型的菜单类.首先定义菜单按钮类.文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js. /** * 显示在顶部的按钮菜单,可以切换 ...