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. iis8.0配置 使用备忘 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容

    由于对iis的了解度不够,使用中总会碰到这样那样的问题,在这我先开个头,遇到问题再一一更新: 我用的是iis8; 1.发布到iis服务器下的网站你自己可以访问,局域网的其他机器不能? 答:是否开放了对 ...

  2. Combox下拉绑定DataGridView

    这个Combox下拉很多人都在用  但其中绘制的语句如下: #endregion #region 方法 #region 绘制DataGridView以及下拉DataGridView private v ...

  3. Allegro PCB -内层分割，比如电源层需要分割几种电源

    内层分割,比如电源层需要分割几种电源. (1).点击Display -> Assign Color 在Option中,先取一种颜色作为高亮显示的颜色. (2).在Find中,选Net,点击mor ...

  4. 计算机学院大学生程序设计竞赛（2015’12） 1005 Bitwise Equations

    #include<cmath> #include<cstdio> #include<cstring> #include<algorithm> using ...

  5. Gamma原理及快速实现算法(C/C++)（转）

    源:Gamma原理及快速实现算法(C/C++) 原文:http://blog.csdn.net/lxy201700/article/details/24929013 参考 http://www.cam ...

  6. openstack controller ha测试环境搭建记录（十三）——配置cinder（控制节点）

    在任一控制节点创建用户:mysql -u root -pCREATE DATABASE cinder;GRANT ALL PRIVILEGES ON cinder.* TO 'cinder'@'loc ...

  7. openstack controller ha测试环境搭建记录（七）——配置glance

    在所有集群安装glance软件:yum install -y openstack-glance python-glanceclient 在任一节点创建glance用户:mysql -u root -p ...

  8. Linux系统目录

    [root@localhost ~]# ls /bin dev home lost+found misc opt root selinux sys usrboot etc lib media net ...

  9. 一、什么是hadoop？

    一.什么是hadoop 1. 背景 Hadoop为分布式文件系统和计算的基础框架系统,其中包含hadoop程序,hdfs系统等.   2. 名词解释 1.Hadoop, Apache开源的分布式框架. ...

  10. SVN简单流程---以公司的使用方法为例

    一  名词解释 svn一般包括      branch  每个branch版本都要生成对应的tag.例如 branch版本号为1.0.0,那么提交后生成的tag版本号为1.0.0.0;当branch修 ...