使用Raphael 画图(二) 扩展的图形 (javascript)
看这文章前,建议先看第一编文章《使用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)的更多相关文章
- Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)
此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...
- 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据
第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...
- webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...
- Oracle 12cR1 RAC集群安装(二)--使用图形界面安装
Oracle 12cR1 RAC集群安装文档:Oracle 12cR1 RAC集群安装(一)--环境准备Oracle 12cR1 RAC集群安装(二)--使用图形界面安装Oracle 12cR1 RA ...
- QRCode.js一个生成二维码的javascript库
前言 最近在开发中遇到一个需求:将后端返回的链接转换成二维码,那么如何来实现呢?我们可以使用QRCode.js来解决这一问题 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...
- 使用Raphael 画图(一) 基本图形 (javascript)
Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...
- 使用Raphael 画图(四) 路径(一) (javascript)
这章介绍路径,本人觉得这是比较难和精髓的一部分. 先介绍基本知识: 可以参考: http://www.chinasvg.com/support/svg-tutorial/svg-path-direct ...
- 使用Raphael 画图(三) 事件 (javascript)
这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
随机推荐
- Ural 1332 把圆细分+圆内切,内含关系判定
题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1332 #include<cstdio> #include<cstrin ...
- UCloud EIP 你真的懂得如何使用么? - SegmentFault
UCloud EIP 你真的懂得如何使用么? - SegmentFault UCloud EIP 你真的懂得如何使用么?
- MySQL5.5 所支持的存储引擎
本博文的主要内容有 .存储引擎的概念 .MySQL5.5 所支持的存储引擎 .操作默认存储引擎 .选择存储引擎 与其他的数据库软件不同,MySQL数据库软件提供了一个名为存储引擎的概念,由于存储引擎是 ...
- sBPM产品介绍
作者:CppExplore http://www.cppblog.com/CppExplore/和 http://blog.csdn.net/cppexplore同步发布. 近3年没发文章,谨以本 ...
- Magento网站迁移指南
"Magento网站迁移指南":关键词:magento 网站 迁移 指南 上周五,为mkt同事迁移了一个从本机到godaddy的magento系统. 中间出了不少状况, 现在写个迁 ...
- dede 如何去除[field:title/]里面出现的b标签
调用[field:title/]标签,两边加<b>怎么去掉<b> 怎么回事??? 最近更新dede的版本后,调用[field:title/]标签,生成的标题两边会自动在标题两边 ...
- span元素之间的间距
去除inline-block元素间间距的N种方法- zhangxinxu http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space- ...
- 下载的chm手册打不开的解决方法?
用ie或者chrome等浏览器下载文件的时候,都会给文件加上一个默认的保护,右键这个文件,打开属性对话框,然后在第一个的选项卡的安全的部分,有个解除这个保护的按钮点下然后确定保存,再打开chm文件就不 ...
- jquery 手机 图片切换 例子 网址
http://m.swdhy.com/page/ShowCompany.aspx?cid=388481&name=山东潍坊金城服装有限公司
- ColorComboBox
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...