看这文章前,建议先看第一编文章《使用Raphael 画图(一) 基本图形 (javascript)》

在Raphael基础上扩展的图形:

要运行该例子要引入附件的2个js包。(g.raphael.rar)

<script type="text/javascript" src="raphael.js" charset="utf-8"></script>
<script type="text/javascript" src="plugins/g.raphael.js" charset="utf-8"></script>

这里用到了set(),第一编文章有简单介绍。这个只是为了统一管理具有相同属性的图形,例如边框颜色相同的图形可以放在一起。当然你也可以不用set()管理,可以每个图形添加属性。

var paper = Raphael("myDiv", 580, 600);//创建视图区域
var set = paper.set();
set.push(
paper.g.flower(18, 50, 20),
paper.g.disc(58, 50, 20),
paper.g.line(108, 50, 20),
paper.g.square(158, 50, 20),
paper.g.triangle(208, 50, 20),
paper.g.star(258, 50, 20),
paper.g.cross(308, 50, 20),
paper.g.plus(358, 50, 20),
paper.g.arrow(408, 50, 20),
paper.g.diamond(458, 50, 20),
paper.g.tag(500, 250, "$9.99", 130),
paper.g.popup(250, 250, "$9.99"),
paper.g.flag(300, 250, "$9.99", 60),
paper.g.label(350, 250, "$9.99"),
paper.g.drop(400, 290, "$10"),
paper.g.blob(450, 290, "$9.99")
);
set.attr({fill:'orange',stroke:'black'});

注释:paper.g.flower(18, 50, 20) 就是第一个“花”图形了,依次类推。

set.attr({fill:'orange',stroke:'black'});统一为set里面的图形设置背景色、边框颜色。

原文地址:http://czpae86.iteye.com/blog/819002

使用Raphael 画图(二) 扩展的图形 (javascript)的更多相关文章

  1. Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)

    此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...

  2. 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  3. webpack4 系列教程(十二):处理第三方JavaScript库

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...

  4. Oracle 12cR1 RAC集群安装(二)--使用图形界面安装

    Oracle 12cR1 RAC集群安装文档:Oracle 12cR1 RAC集群安装(一)--环境准备Oracle 12cR1 RAC集群安装(二)--使用图形界面安装Oracle 12cR1 RA ...

  5. QRCode.js一个生成二维码的javascript库

    前言 最近在开发中遇到一个需求:将后端返回的链接转换成二维码,那么如何来实现呢?我们可以使用QRCode.js来解决这一问题 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...

  6. 使用Raphael 画图(一) 基本图形 (javascript)

    Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...

  7. 使用Raphael 画图(四) 路径(一) (javascript)

    这章介绍路径,本人觉得这是比较难和精髓的一部分. 先介绍基本知识: 可以参考: http://www.chinasvg.com/support/svg-tutorial/svg-path-direct ...

  8. 使用Raphael 画图(三) 事件 (javascript)

    这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...

  9. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

随机推荐

  1. Ural 1332 把圆细分+圆内切,内含关系判定

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1332 #include<cstdio> #include<cstrin ...

  2. UCloud EIP 你真的懂得如何使用么? - SegmentFault

    UCloud EIP 你真的懂得如何使用么? - SegmentFault UCloud EIP 你真的懂得如何使用么?

  3. MySQL5.5 所支持的存储引擎

    本博文的主要内容有 .存储引擎的概念 .MySQL5.5 所支持的存储引擎 .操作默认存储引擎 .选择存储引擎 与其他的数据库软件不同,MySQL数据库软件提供了一个名为存储引擎的概念,由于存储引擎是 ...

  4. sBPM产品介绍

    作者:CppExplore   http://www.cppblog.com/CppExplore/和 http://blog.csdn.net/cppexplore同步发布. 近3年没发文章,谨以本 ...

  5. Magento网站迁移指南

    "Magento网站迁移指南":关键词:magento 网站 迁移 指南 上周五,为mkt同事迁移了一个从本机到godaddy的magento系统. 中间出了不少状况, 现在写个迁 ...

  6. dede 如何去除[field:title/]里面出现的b标签

    调用[field:title/]标签,两边加<b>怎么去掉<b> 怎么回事??? 最近更新dede的版本后,调用[field:title/]标签,生成的标题两边会自动在标题两边 ...

  7. span元素之间的间距

    去除inline-block元素间间距的N种方法- zhangxinxu http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space- ...

  8. 下载的chm手册打不开的解决方法?

    用ie或者chrome等浏览器下载文件的时候,都会给文件加上一个默认的保护,右键这个文件,打开属性对话框,然后在第一个的选项卡的安全的部分,有个解除这个保护的按钮点下然后确定保存,再打开chm文件就不 ...

  9. jquery 手机 图片切换 例子 网址

    http://m.swdhy.com/page/ShowCompany.aspx?cid=388481&name=山东潍坊金城服装有限公司

  10. ColorComboBox

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...