`
czpae86
  • 浏览: 719625 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

使用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里面的图形设置背景色、边框颜色。

 

  • 大小: 74.3 KB
0
0
分享到:
评论
2 楼 MJ23飞 2011-11-01  
你好,Raphael.fn.g.arrowMinus = function(c, f, e, l) {
return this.path("M".concat(c - e * 0.7, ",", f - e * 0.4, "l", [
e * 0.6 + l, 0, 0, -e * 0.4, e, e * 0.8, -e, e * 0.8, 0,
-e * 0.4, -e * 0.6 - l, 0 ], "z"));
};
上面的方法可以画出方向为右的可调大小长度的箭头,可是我想画左向的箭头怎么办啊?
1 楼 hpyhgz 2010-12-30  
很不错啊,谢谢分享

相关推荐

    SVG画图插件raphaelJS

    RaphaelJS是一款强大的JavaScript库,专门用于在SVG(Scalable Vector Graphics)和VML(Vector Markup Language)格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形,而且这些图形在任何...

    raphael.js扩展的拖拽功能,raphael.draggable.js,raphael.extension.js

    在SVG和VML图形库的世界里,Raphael.js是一个非常受欢迎的JavaScript库,它使得在网页上创建和操作矢量图形变得极其简单。Raphael.js不仅支持多种浏览器,包括那些不支持HTML5 canvas的老旧浏览器,而且提供了一套...

    Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize

    Raphael.js是一个强大的JavaScript库,专门用于在Web浏览器中创建矢量图形。它提供了一种在SVG(可缩放矢量图形)和VML(Vector Markup Language)之间无缝切换的方法,使得开发者能够在所有现代浏览器以及IE5.5及更...

    raphael 简单绘图

    Raphaël是一款JavaScript库,专门用于在Web浏览器中创建矢量图形。它基于SVG(Scalable Vector Graphics)和VML(Vector Markup Language),使得开发者可以在任何分辨率下绘制出清晰、可缩放的图形。这个“raphael...

    javascript raphael 画饼图

    JavaScript Raphael 是一个强大的矢量图形库,它允许开发者在网页上创建复杂的图形,包括饼图。Raphael 使用SVG(Scalable Vector Graphics)和VML(Vector Markup Language)技术,这两种技术都支持在浏览器中绘制...

    js矢量画图,raphael.js使用案例,svg画图,web画图,b/s画图,网页画图

    基于raphael.js 实现矢量图形的绘制,兼容IE,fireFox,chrome等主流浏览器。 功能包括:画矩形,画圆,画三角形,画直线,画虚线,画大括号,画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。 解压后直接...

    raphaeljs_starter

    RaphaelJS是一种基于JavaScript的开源矢量图形库,它能够用于在现代浏览器中创建复杂的矢量图形和动画。RaphaelJS的一个显著特点是其跨浏览器兼容性,它能够在不同的浏览器环境下提供一致的表现,这使得开发者可以...

    javascript 基于Raphael的工作流可视化编辑

    总结来说,这个项目涉及了JavaScript编程、Raphael图形库的使用、工作流设计的概念,以及前端交互设计,通过这些技术实现了用户友好的工作流可视化编辑器。用户可以通过拖放操作和连接锚点,直观地创建和编辑流程图...

    raphael矢量图形库

    Raphaël是一款强大的JavaScript库,专用于在Web浏览器中创建矢量图形。这个库由Dmitry Baranovskiy开发,旨在提供一个跨浏览器的解决方案,支持Internet Explorer 9+以及所有现代浏览器,如Chrome、Firefox、Safari...

    使用RaphaelJS开发可拖拽的工作流前台

    在前端开发领域,RaphaelJS是一个强大的JavaScript库,专门用于创建矢量图形。它使得开发者能够在网页上绘制出复杂的图形,且这些图形在任何分辨率和屏幕尺寸下都能保持清晰。本篇文章将深入探讨如何利用RaphaelJS...

    jquery图形插件raphael

    raphael是jquery的插件,可以轻松实现SVG能实现的功能,在WEB前端进行绘制图形,由于SVG只能在IE9以上使用,该插件兼容了IE9以下版本使用VML进行绘制,而且操作比SVG更加简单,是绘制WEB自定义图形的较好的插件,内...

    raphael画流程图

    Raphaël.js 是一个基于SVG(Scalable Vector Graphics)和VML(Vector Markup Language)的JavaScript库,用于在Web浏览器中创建矢量图形。它使得开发者能够方便地在网页上绘制复杂的图形,包括流程图。流程图是一...

    Learning Raphael JS Vector Graphics 配套源码

    1. **示例代码**:包含了各种使用Raphael创建图形和应用动画的实例,可以帮助理解Raphael的工作原理和用法。 2. **教程配套文件**:可能包含HTML、CSS和JavaScript文件,这些文件展示了如何在实际项目中集成...

    raphael浏览器画图

    Raphaël是一款强大的JavaScript库,专为在Web浏览器中绘制矢量图形而设计。它使得开发者能够在HTML5 Canvas或SVG(Scalable Vector Graphics)上进行绘图,支持包括Internet Explorer 9及以上版本,Chrome,Firefox...

    Raphael 参考文档《Learning Raphael JS Vector Graphics》

    Raphael是一个强大的JavaScript库,专为在Web浏览器中创建矢量图形而设计。它支持SVG(Scalable Vector Graphics)和VML(Vector Markup Language),确保在各种浏览器中都能得到良好的兼容性,包括较旧的IE版本。...

    raphael动态绘制简单的图形.zip

    "raphael动态绘制简单的图形.zip"这个压缩包文件显然包含了使用Raphaël JavaScript库进行动态图形绘制的相关示例。Raphaël是一个流行的选择,因为它允许开发者在网页上创建矢量图形,这些图形可以在各种分辨率和...

    plot-raphael:JavaScript 图形库

    情节拉斐尔(Plot-Raphael)是一个基于JavaScript的高性能绘图库,它允许开发者在网页上创建各种复杂的图形和图表。这个库的名称来源于Raphael.js,一个强大的SVG(Scalable Vector Graphics)和VML(Vector Markup ...

    前端项目-raphael.zip

    【前端项目-raphael.zip】是一个包含 Raphael JavaScript 库的前端开发资源包。Raphael 是一个流行的开源库,专门用于在网页上创建矢量图形。它使得开发者能够在现代浏览器上利用 SVG (Scalable Vector Graphics) 和...

    web设计器-设计流程图[raphael]

    Raphael是一个JavaScript库,专为在Web浏览器中创建矢量图形而设计。它支持SVG(可缩放矢量图形)和VML(矢量标记语言),确保在不同的浏览器和设备上都能提供一致的显示效果。Raphael使得开发人员能够轻松地创建出...

Global site tag (gtag.js) - Google Analytics