- 浏览: 13638211 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
Introduction
SVG, short for Scalable Vector Graphics, is a XML-based language for describing objects and scenes. SVG elements can fire events and can be scripted with JavaScript. SVG comes with several built-in primitive types such as circles and rectangles as well as being able to display text. While SVG as a technology is not new, HTML5 now enables SVG objects to be embedded in a page directly without the use of a <object> or <embed> tag bringing it in line with what is currently available with the canvas. Raphaël.js is a JavaScript library that allows you to create SVG scenes programmatically. It uses a unified API to create SVG scenes where it is supported or VML(Vector Modeling Language) where it is now, namely Internet Explorer versions before IE9.
Drawing Your First Scene
Let's begin by drawing a simple scene with Raphaël. We begin drawing the
scene by instantiating a Raphaël object. In this case,
I used the constructor that inserts it into a given HTML element with a given
width and height but you could also have Raphaël append the object to the DOM
(Document Object Model). Next, I created a rectangle by supplying the desired
x and y positions with the width and height. Next, I created a circle by
giving the desired coordinates and radius. Finally, I used the attribute function
(attr) to assign colors to the objects.
Each SVG object can have attributes
assigned to it for things like the the color, rotation, stroke color and size,
etc. You can find a detailed list of assignable attributes
here
.
var paper = Raphael("sample-1",200,75); var rect = paper.rect(10, 10, 50, 50); var circle = paper.circle(110, 35, 25); rect.attr({fill: "green"}); circle.attr({fill: "blue"});
Drawing Advanced Shapes with Paths
A path is a series of instructions used by the renderer to create objects. Drawing with a path is like drawing with a pen on a giant piece of graph paper. You can instruct the pen to be lifted from the paper and move to a different position(move to), to draw a line(line to), or to draw a curve(arc to). Paths enable SVG to create objects with the same level of detail regardless of the scale. When you issue an instruction to say, draw a curve, SVG takes into account the original and final desired size of the curve (after scaling), it mathematically computes the intermediary points to render a smooth curve.
The code and figure below show a rectangle and closed curved drawn with paths. The letter M followed by coordinates moves the pen to that position, L followed by coordinate pair draws a line from that the current position to that position. s draws a smooth Bézier curve with a given control point and endpoint with relative coordinates. Z closes a path. Generally, using an uppercase letter issues the command with absolute coordinates, lowercase uses relative coordinates. M/m and Z/z, respectively, issue the same command for uppercase or lowercase. You can view a list of all the path instructions here .
var paper = Raphael("sample-2", 200, 100); var rectPath = paper.path("M10,10L10,90L90,90L90,10Z"); var curvePath = paper.path("M110,10s55,25 40,80Z"); rectPath.attr({fill:"green"}); curvePath.attr({fill:"blue"});
Drawing Text
Having illustrations without the ability to draw text would be really boring, luckily, Raphaël provides two methods to draw text. The first method, text, takes a x and y coordinates along with the string to draw. The text method doesn't give you much control over the font or other effects. It draws in the default font with the default size.
The second method, print, draws the text as a collection of paths. As a result, we are able to modify individual letters. In the example below, we colored the numeral 5 with an orange fill, colored "ROCKS" with a bluish fill and made the stroke thicker to simulate bold text. We did this using a custom font with a font size of 40pts.
var paper = Raphael("sample-4", 600, 100); var t = paper.text(50, 10, "HTML5ROCKS"); var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40); letters[4].attr({fill:"orange"}); for (var i = 5; i < letters.length; i++) { letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});}
The Vegur font doesn't in Raphaël, nor does any font for that matter. And besides, most fonts use TrueType(TTF) or OpenType(OTF) format. To get from those formats into something that is usable by Raphaël, we need to convert them using a tool called Cufón . Cufón allows you export the different font styles of a given font (regular, bold, italic, bold italic, etc) for use with Raphaël. It is outside the scope of this tutorial to cover Cufón in detail. Check the aforemention link for more details. A great source of unemcumbered fonts for your applications is the Google Font Directory .
Events
SVG elements can directly subscribe to all the traditional mouse-based events: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, and hover . Raphaël provides the ability to add you own methods to either the canvas or individual elements, so in theory there is nothing preventing you from adding gestures for mobile browsers.
The snippet below binds a function to rotate a given letter in "ROCKS" 45 degrees when it is clicked.
for(var i = 5; i < letters.length; i++) { letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke:"#3D5C9D" }); letters[i].click(function(evt) {this.rotate(45); }); }
SVG vs Canvas
Given that they are both methods to draw objects on the screen, it's often not immediately clear why you should use one over the other. The two mediums have vastly different approaches. Canvas is an immediate mode API is much like drawing with crayons. You can clear or destroy part of the drawing but you can't by default revert or alter a previous stroke. Canvas is also a raster bitmap so it is is very much subject to pixelation when images are scaled. SVG on the other hand, as previously mentioned can serve multiple resolutions with the same level of detail and can be scripted.
Whether to use SVG or Canvas for game programming is fairly simple. Besides the normal constraints of whether you plan to deploy to desktop or mobile, it really comes down to sprite count. SVG lends itself to what I'd call low-fidelty games. I describe those as games that have limited concurrent movement of objects and sprite removal and creation. Many board games like Chess, Checkers, or Battleship, as well as card games like BlackJack, Poker, and Hearts fall into this category. Another unifying thread is that in many of these games, a player will need to move an arbitrary object and SVG's scriptability makes object picking easy.
Authoring Tools for SVG
Using SVG doesn't mean at all that you have to create paths by hand. There are several tools, both open source and commercial, that allow you to export to SVG. The two tools I have used extensively and highly recommend are Inkscape and svg-edit .
svg-edit
svg-edit is a browser-based SVG editor written in JavaScript. It provides a limited user interface reminiscent of GIMP or MS Paint. Unless the level of detail was relatively low, I've mostly used svg-edit to tweak SVG drawings rather than create them. svg-edit allows you to create objects graphically or with SVG code.
Inkscape
Inkscape is a cross-platform full-fledged vector graphics editor similar to CorelDraw, Adobe Illustrator, and Xara. Inkscape benefits from a vibrant plugin community and a mature codebase. The predecessor to Inkscape, from which Inkscape forked, was developed in 1999. Inkscape is my go-to application for vector-based and bitmap assets.
A Minor Aside
SVG is not supported on Windows in Internet Explorer versions before IE9. IE uses a vector graphics format called VML, Vector Modeling Language, which provides much of the same functionality as SVG. Raphaël can create scenes that use SVG or VML where it is supported. Using Raphaël is an easy way to provide cross-platform support.
References
- Rapahël.js: http://raphaeljs.com
- Raphaël Documentation: http://raphaeljs.com/reference.html
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1178使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2261当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1174参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1013在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 943从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1549先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3297每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1202原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4457出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1339一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1557一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 823域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2276代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 717代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1592插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1181javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3573寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1102AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 691AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
NULL 博文链接:https://love-66521.iteye.com/blog/1974593
Raphaël.js 是一个小型的 JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。 Raphaël.js 使用SVG W3C推荐标准和VML作为创建图形的基础。
可视化流程设计器,基于jQuery和Raphaël ,兼容性强,使用方便,扩展性强。经过一夜的努力反编译了一位大神的代码,整理了整体思路并添加注释。 具体描述可在我博客中找到。 10分确实有点贵,但是绝对超值,而且我...
NULL 博文链接:https://justcoding.iteye.com/blog/665253
麻省理工学院许可证 (MIT) 版权 (c) 特此授予任何人免费获得本软件和相关文档文件(“软件”)副本的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或出售软件的...
NULL 博文链接:https://justcoding.iteye.com/blog/1618691
Raphaël 是一个小型 JavaScript 库,它可以简化您在网络上使用矢量图形的工作。 例如,如果您想创建自己的特定图表或图像裁剪和旋转小部件,您可以使用此库轻松轻松地实现它。 Raphaël ['ræfeɪəl] 使用 SVG W3C...
本人网上找的代码,进过修改增加了省区文字 演示地址:http://www.5imvc.com/Rep/Map
raphael.boolean.js-使用Raphaël执行布尔运算 该插件为javascript矢量库Raphaël( )提供了布尔操作。 您可以使用单个元素(而不是集合)来执行 联合[A + B | A或B] 差异[A-B | A NOT B] 交集[A * B | A和B] ...
xdot.js xdot.js 将格式的字符串解析为对象。 这xdot.py的第一个版本是在词法分析器/解析器代码非常密切的端口 。 生成 xdot 文件 xdot是使用 GraphViz 布局命令之一从点文件生成的。 在这种情况下,我们将只使用...
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you ...
Hybicon是一款基于HTML5 SVG和Raphaël.js的混合图标动画特效插件。Hybicon的原理是合成两个SVG图标,在鼠标滑过或鼠标点击图标的时候,SVG图标将会产生动画特效。
RaphaëlVarane新标签页扩展程序为您的Chrome浏览器带来了新外观。 安装RaphaëlVarane New Tab Theme,并欣赏RaphaëlVarane的精选高清图片。 它带有一些很酷的属性,这些属性可以改善您的“新标签页”体验,例如:...
它基于Raphaël库进行矢量绘图。 入门 安装Justgage就像... bower install justgage-official 或您想使用NPM ... npm install justgage --save 示例 或者您可以随时下载CSS和JS文件... <!-- Raphael must ...
raphale.js html图形 . 可以做一些比较不错的效果 有空的玩玩 分不够了 上传的东西
Raphaël Hertzog and Roland Mas had the required qualities and managed to create and update this book. I thank them very much for their work and have no doubt that reading this book will be both ...
节点拉斐尔 使用漂亮的SVG库生成svg数据。 特征 使用Raphael的静态svg生成 安装 npm install node-raphael 动机 NIH-不是在这里发明的...不好意思.....var raphael = require ( 'node-raphael' ) ;...
曲线图 动感 ... 该项目的目的是通过绘制椭圆曲线组成的点来帮助更好地理解这项技术。 此外,添加点的过程是可视化的。... 所使用的技术栈由 HTML、JavaScript、CSS 和。 路线图 实现 k 乘法 在状态栏中显示计算
#RaphaëlLustin的个人页面
同时,JQTouch的创始人David Kaneda,以及Raphaël的创始人也已加盟Sencha团队。“在未来的几个月内,我们的合作将会创造出令人惊叹的新东西来。不会等太久的,我保证!”Sencha的CEO Abraham Elias如是说。 ...