淘先锋技术网

首页 1 2 3 4 5 6 7

Raphael学习笔记（3）--绘图（路径【直线】）

1、路径简介

Paper.path(pathString)：绘制路径；

参数含义：

  • pathString：描述路径的字符串；


下面详细描述一下路径字符串的内容和书写风格。

路径由2部分组成：命令和坐标。

（1）命令：单个大（小）写字母。大写字母表示绝对坐标，小写字母表示相对坐标；

（2）坐标：一个或多个数字。多个数字之间使用逗号或者空格隔开；

（3）命令和坐标之间可以有空格，也可以省略空格；


  • 移动坐标 M(m) moveto (x y)+
  • 结束路径 Z(z) closepath (none)
  • 直线 L(l) lineto (x y)+
  • 水平直线 H(h) horizontal lineto x+
  • 竖直直线 V(v) vertical lineto y+
  • 3次贝塞尔曲线 C(c) curveto (x1 y1 x2 y2 x y)+
  • 平滑3次贝塞尔曲线 S(s) smooth curveto (x2 y2 x y)+
  • 2次贝塞尔曲线 Q(q) quadratic Bézier curveto (x1 y1 x y)+
  • 平滑2次贝塞尔曲线 T(t) smooth quadratic Bézier curveto (x y)+
  • 椭圆曲线 A(a) elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+


绘制光滑的2次、3次贝塞尔曲线需要注意：

（1）后一段曲线的起点必须是前一段曲线的终点；

（2）前后2段曲线必须对称；

 

关于贝赛尔曲线的知识，可以参考下面的文章：canvas中的贝赛尔曲线。

 

2、绘图实例

下面让我们看看代码的书写： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<script type="text/javascript" src="js/raphael.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

  	<style type="text/css">
		.wraper {
			position: relative;
			float: left;
			width: 400px;
			height: 400px;
			margin-left: 10px;
			margin-top: 10px;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			var raphael = new Raphael('raphael_1',400,400);

			//绘制路径(三角形)
			raphael.path('M 160,100 L270,130 L200,170 z');
			//绘制路径(T型)
			raphael.path('M 50,190 H80 V220 H110 V250 H20 V220 H50 z');

		});
		
	</script>
  </head>	
  
  <body>
	
	<div id="raphael_1" class="wraper"></div>

  </body>
</html>

实现的效果：



版权声明：本文为CSDN博主「weixin_34233421」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_34233421/article/details/91559226

react-native-art-绘图入门

javascript 移动开发 ViewUI
在ReactNative中ART是个非常重要的库，它让非常酷炫的绘图及动画变成了可能。但是可能是知道的人真的不多导致文档及少中文更少。很多都是把英文的参数列表翻译过来，也没有案例。于是决定出这样一份入门文档及可能遇...

Raphael学习笔记（2）--绘图（基本图形）

1、图形简介 与html5不同，Raphael提供了以下基本图形：矩形、圆形、椭圆形（html5只有矩形）。 Paper.rect(x,y,width,height,r)：绘制矩形；参数含义：x,y：矩形左上角相对于原点(0,0)的坐标；width,height：矩形的...

Raphael path 拖动实现

ui javascript ViewUI
让Raphael的Path动起来Raphaël是一个很实用的线上矢量图操作Javascript库。使用简单，一个值得一提的卖点是通过抽象出共同的接口屏蔽了SVG和VML之间的差异，做到了对主流浏览器的支持，包括很不给力的IE6。（很可惜....