看这文章前,建议先看第一编文章《使用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里面的图形设置背景色、边框颜色。
- 大小: 74.3 KB
分享到:
相关推荐
RaphaelJS是一款强大的JavaScript库,专门用于在SVG(Scalable Vector Graphics)和VML(Vector Markup Language)格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形,而且这些图形在任何...
在SVG和VML图形库的世界里,Raphael.js是一个非常受欢迎的JavaScript库,它使得在网页上创建和操作矢量图形变得极其简单。Raphael.js不仅支持多种浏览器,包括那些不支持HTML5 canvas的老旧浏览器,而且提供了一套...
Raphael.js是一个强大的JavaScript库,专门用于在Web浏览器中创建矢量图形。它提供了一种在SVG(可缩放矢量图形)和VML(Vector Markup Language)之间无缝切换的方法,使得开发者能够在所有现代浏览器以及IE5.5及更...
Raphaël是一款JavaScript库,专门用于在Web浏览器中创建矢量图形。它基于SVG(Scalable Vector Graphics)和VML(Vector Markup Language),使得开发者可以在任何分辨率下绘制出清晰、可缩放的图形。这个“raphael...
JavaScript Raphael 是一个强大的矢量图形库,它允许开发者在网页上创建复杂的图形,包括饼图。Raphael 使用SVG(Scalable Vector Graphics)和VML(Vector Markup Language)技术,这两种技术都支持在浏览器中绘制...
基于raphael.js 实现矢量图形的绘制,兼容IE,fireFox,chrome等主流浏览器。 功能包括:画矩形,画圆,画三角形,画直线,画虚线,画大括号,画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。 解压后直接...
RaphaelJS是一种基于JavaScript的开源矢量图形库,它能够用于在现代浏览器中创建复杂的矢量图形和动画。RaphaelJS的一个显著特点是其跨浏览器兼容性,它能够在不同的浏览器环境下提供一致的表现,这使得开发者可以...
总结来说,这个项目涉及了JavaScript编程、Raphael图形库的使用、工作流设计的概念,以及前端交互设计,通过这些技术实现了用户友好的工作流可视化编辑器。用户可以通过拖放操作和连接锚点,直观地创建和编辑流程图...
Raphaël是一款强大的JavaScript库,专用于在Web浏览器中创建矢量图形。这个库由Dmitry Baranovskiy开发,旨在提供一个跨浏览器的解决方案,支持Internet Explorer 9+以及所有现代浏览器,如Chrome、Firefox、Safari...
在前端开发领域,RaphaelJS是一个强大的JavaScript库,专门用于创建矢量图形。它使得开发者能够在网页上绘制出复杂的图形,且这些图形在任何分辨率和屏幕尺寸下都能保持清晰。本篇文章将深入探讨如何利用RaphaelJS...
raphael是jquery的插件,可以轻松实现SVG能实现的功能,在WEB前端进行绘制图形,由于SVG只能在IE9以上使用,该插件兼容了IE9以下版本使用VML进行绘制,而且操作比SVG更加简单,是绘制WEB自定义图形的较好的插件,内...
Raphaël.js 是一个基于SVG(Scalable Vector Graphics)和VML(Vector Markup Language)的JavaScript库,用于在Web浏览器中创建矢量图形。它使得开发者能够方便地在网页上绘制复杂的图形,包括流程图。流程图是一...
1. **示例代码**:包含了各种使用Raphael创建图形和应用动画的实例,可以帮助理解Raphael的工作原理和用法。 2. **教程配套文件**:可能包含HTML、CSS和JavaScript文件,这些文件展示了如何在实际项目中集成...
Raphaël是一款强大的JavaScript库,专为在Web浏览器中绘制矢量图形而设计。它使得开发者能够在HTML5 Canvas或SVG(Scalable Vector Graphics)上进行绘图,支持包括Internet Explorer 9及以上版本,Chrome,Firefox...
Raphael是一个强大的JavaScript库,专为在Web浏览器中创建矢量图形而设计。它支持SVG(Scalable Vector Graphics)和VML(Vector Markup Language),确保在各种浏览器中都能得到良好的兼容性,包括较旧的IE版本。...
"raphael动态绘制简单的图形.zip"这个压缩包文件显然包含了使用Raphaël JavaScript库进行动态图形绘制的相关示例。Raphaël是一个流行的选择,因为它允许开发者在网页上创建矢量图形,这些图形可以在各种分辨率和...
情节拉斐尔(Plot-Raphael)是一个基于JavaScript的高性能绘图库,它允许开发者在网页上创建各种复杂的图形和图表。这个库的名称来源于Raphael.js,一个强大的SVG(Scalable Vector Graphics)和VML(Vector Markup ...
【前端项目-raphael.zip】是一个包含 Raphael JavaScript 库的前端开发资源包。Raphael 是一个流行的开源库,专门用于在网页上创建矢量图形。它使得开发者能够在现代浏览器上利用 SVG (Scalable Vector Graphics) 和...
Raphael是一个JavaScript库,专为在Web浏览器中创建矢量图形而设计。它支持SVG(可缩放矢量图形)和VML(矢量标记语言),确保在不同的浏览器和设备上都能提供一致的显示效果。Raphael使得开发人员能够轻松地创建出...