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

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

阅读更多

这章介绍路径,本人觉得这是比较难和精髓的一部分。

 

先介绍基本知识:

 

可以参考:

http://www.chinasvg.com/support/svg-tutorial/svg-path-directive-guide.html

 

 

/*  命令解释:
			M = moveto   参数:(x y)
			L = lineto  参数:(x y)
			H = horizontal lineto    参数:(x)
			V = vertical lineto   参数:(y)
			C = curveto   参数:(x1 y1 x2 y2 x y)
			S = smooth curveto   参数:(x2 y2 x y)
			Q = quadratic Belzier curve   参数:(x1 y1 x y)
			T = smooth quadratic Belzier curveto   参数:(x y)
			A = elliptical Arc    参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
			Z = closepath   参数(none)
		*/

 

例子:

var p1 = paper.path('M250 150 L180 350 L350 350 Z').attr({stroke:'red','stroke-width':2});
		
var p2 = paper.path('M350,100 h-100 a100,100 0 1,0 100,-100 z').attr({stroke:'blue','stroke-width':2});
		
var p3 = paper.path('M350,300 a100,100 0 1,0 100,-100 z').attr({stroke:'green','stroke-width':2});
		
var p4 = paper.path('M150 100 L100 200 Z').attr({'stroke-width':2});
var p5 = paper.path('M100 100 L150 200 Z').attr({'stroke-width':2});

 注释:例子p1定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。

 

效果图:


 

  • 大小: 89.5 KB
分享到:
评论
2 楼 fx_feng 2011-06-02  
hpyhgz 写道
求一条直线的末端带个箭头怎么画。。

1 楼 hpyhgz 2010-12-30  
求一条直线的末端带个箭头怎么画。。

相关推荐

    SVG画图插件raphaelJS

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

    raphael 简单绘图

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

    javascript raphael 画饼图

    在JavaScript中,使用`Raphael()`函数创建一个新的Raphael实例,指定画布的ID和大小: ```javascript var paper = Raphael('piechart', 400, 400); ``` ### 4. 计算饼图数据 定义饼图的数据结构,通常是一个数组,...

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

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

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

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

    raphaelJS制作图表、饼图、柱状图、曲线图

    - 创建路径:使用`raphael.path()`函数,通过计算每个点的坐标来构建SVG路径字符串。 - 添加轴:绘制x轴和y轴,同样包括刻度和标签。 - 动态效果:可以考虑添加平滑曲线的功能,如贝塞尔曲线。 在实际应用中,你...

    raphaeljs_starter

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

    web流程图动态绘制-使用raphael

    1. **初始化Raphael画布**:在HTML中创建一个div元素,然后在JavaScript中使用`Raphael('div_id', width, height)`创建Raphael实例。 2. **绘制节点**:根据流程图的需求,使用`rect`, `circle`或者其他形状创建...

    raphael画流程图

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

    Raphael_manual_API.rar

    Raphael.js是一个基于SVG(可缩放矢量图形)的JavaScript库,专门用于在Web浏览器中创建复杂的矢量图形。这份手册包含了关于Raphael的所有核心概念、方法和属性,是理解和实践这个强大工具的必备参考资料。 Raphael...

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

    在本项目中,我们关注的是使用JavaScript基于Raphael库实现的工作流可视化编辑器。Raphael是一个JavaScript库,它允许开发者在网页上创建复杂的矢量图形,支持SVG(Scalable Vector Graphics)和VML(Vector Markup ...

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

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

    Raphael学习笔记

    根据提供的文件信息,可以看出这是一份关于Raphael JavaScript库的学习笔记。Raphael 是一个非常强大的JavaScript库,用于在Web浏览器中绘制矢量图形。它基于SVG(可缩放矢量图形)标准,并提供了丰富的API来简化...

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

    Raphael_pie图表

    Raphael.js 是一个著名的JavaScript库,专用于在Web页面上创建矢量图形。这个库使得开发者能够在所有现代浏览器中创建出复杂、交互式的图形,包括饼图(pie chart)。饼图是一种常用的数据可视化工具,它将数据比例...

    Learning Raphael JS Vector Graphics 配套源码

    Raphael JS是一个强大的JavaScript库,专门用于在Web浏览器中创建矢量图形。它允许开发者创建出复杂的、可缩放的图形,这些图形在任何分辨率下都能保持清晰,从而提供了优质的用户体验。"Learning Raphael JS Vector...

    raphael

    raphael

    Raphael走势图

    在提供的压缩包文件中,"Raphael走势图"可能包含了一个示例项目或代码库,用于展示如何使用Raphael库创建走势图表。这个文件可能包括HTML文件、CSS样式表和JavaScript脚本,以及可能的JSON数据文件,用于填充图表。...

Global site tag (gtag.js) - Google Analytics