raphaeljs_矢量图形与raphaeljs
raphaeljs
RaphaelJS is a JavaScript library that provides an API for manipulating SVG, and SVG support for Internet Explorer. It achieves the latter by emulating SVG in Internet Explorer using VML.
RaphaelJS是一个JavaScript库，它提供用于处理SVG的API ，以及对Internet Explorer的SVG支持。 它通过使用VML在Internet Explorer中模拟SVG来实现后者。
SVG is a language for describing vector graphics in XML. SVG is a W3C specification and works well with HTML, CSS and JavaScript.
SVG是一种用于描述XML中的矢量图形的语言。 SVG是W3C规范，可以很好地与HTML，CSS和JavaScript一起使用。
建立 (Setup)
RaphaelJS is a JavaScript library so setting it up requires simply connecting to it in your code by linking to it.
RaphaelJS是一个JavaScript库，因此设置它只需要通过链接就可以在代码中简单地连接到它。
The code below will draw a circle of radius 50 pixels at point (50, 50).
下面的代码将在点(50，50)处绘制一个半径为50像素的圆。
<html> <head> <title>Circle</title> </head> <body> <div id=”container”></div> <script src=”https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script> paper = Raphael(‘container’, 100, 100); var circle = paper.circle(50, 50, 50); </script> </body></html><div id=”container”></div> contains a div element that the library will be drawing in.
<div id=”container”></div>包含将在库中绘制的div元素。
paper = Raphael(‘container’, 100, 100); creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.
paper = Raphael('container', 100, 100); 创建一个要在其上绘制的画布对象。 您必须首先执行此操作，因为将来从此实例对绘制方法的所有调用都将绑定到此画布。
The first argument in the function Raphael() is the id of the HTML element inside of which you would like to start drawing things.
函数Raphael()的第一个参数是您要在其中开始绘制内容HTML元素的ID。
var circle = paper.circle(50, 50, 25); creates a RaphaelJS SVG object inside the thing with id=”container” that is a circle which is 50 pixels from the top and left of the paper.
var circle = paper.circle(50, 50, 25); 在id=”container”的事物内创建RaphaelJS SVG对象，该对象是一个圆形，距纸张的顶部和左侧50个像素。
RaphaelJS元素 (RaphaelJS Elements)
RaphaelJS supports 3 kinds of elements: shapes, images and text. This article will cover how to draw shapes in RaphaelJS.
RaphaelJS支持3种元素：形状，图像和文本。 本文将介绍如何在RaphaelJS中绘制形状。
After you create your paper object, in order to work with Raphael elements, you must:
创建纸面对象之后，为了使用Raphael元素，您必须：
- Create a RaphaelJS element创建一个RaphaelJS元素
- Manipulate the style of the element操纵元素的样式
- Add events to the element using JavaScript.使用JavaScript将事件添加到元素。
画一个圆 (Drawing a Circle)
The code to draw a circle from the RaphaelJS documentation is Paper.circle(x, y, r) where x is the x coordinate of the circle, y is the y coordinate of the circle and r is the radius.
从RaphaelJS文档中绘制圆的代码是Paper.circle(x，y，r)，其中x是圆的x坐标，y是圆的y坐标，r是半径。
The code in the Setup section above already shows how to draw a circle of radius 25 at the point 50, 50 of the paper.
上面“设置”部分中的代码已经显示了如何在纸张的点50、50处绘制半径为25的圆。
To add attributes to the circle is trivial. To draw a red circle with a black stroke, we use the code shown below:
向圆添加属性很简单。 要绘制带有黑色笔划的红色圆圈，我们使用以下代码：
<script> paper = Raphael(‘container’, 100, 100); var circle = paper.circle(50, 50, 25); var attributes = { fill: “#FF0000”, stroke: ‘#000’, “stroke-width”: 3, “stroke-linejoin”: “round”, }; circle.attr(attributes);</script>The generated image is shown below:
生成的图像如下所示：
绘制椭圆 (Drawing an Ellipse)
The code to draw an ellipse from the RaphaelJS documentation is Paper.ellipse(x, y, rx, ry) where x is the x coordinate of the centre, y is the y coordinate of the centre, rx is the horizontal radius and ry is the vertical radius.
从RaphaelJS文档绘制椭圆的代码是Paper.ellipse(x，y，rx，ry)其中x是中心的x坐标，y是中心的y坐标，rx是水平半径，ry是垂直半径。
The code to draw an ellipse is shown below:
绘制椭圆的代码如下所示：
<script> paper = Raphael(‘container’, 100, 100); var ellipse = paper.ellipse(50, 50, 40, 20); var attributes = { fill: “#FF0000”, stroke: ‘#000’, “stroke-width”: 3, “stroke-linejoin”: “round”, }; ellipse.attr(attributes);</script>The generated ellipse is shown below:
生成的椭圆如下所示：
绘制矩形 (Drawing a Rectangle)
The code to draw a rectangle from the RaphaelJS documentation is Paper.rect(x, y, width, height, [r]) where x is the x coordinate of the top left corner, y is the y coordinate of the top left corner, width is the width of the rectangle and height is the height of the rectangle.
从RaphaelJS文档绘制矩形的代码是Paper.rect(x，y，width，height，[r])，其中x是左上角的x坐标，y是左上角的y坐标， width是矩形的宽度，height是矩形的高度。
[r] is optional and is for the radius of the rectangle if it would have rounded corners.
[r]是可选的，如果矩形具有圆角，则为矩形的半径。
<script> paper = Raphael(‘container’, 100, 100); var rectangle = paper.rect(10, 10, 50, 50); var attributes = { fill: “#FF0000”, stroke: ‘#000’, “stroke-width”: 3, “stroke-linejoin”: “round”, }; rectangle.attr(attributes);</script>The generated rectangle is shown below:
生成的矩形如下所示：
结论 (Conclusion)
The RaphaelJS library is a very versatile library for drawing in the browser. Since its’ release in 2008, it has gone on to become a simple library for creating vector graphics in the browser.
RaphaelJS库是一个非常通用的库，用于在浏览器中进行绘制。 自2008年发布以来，它一直成为用于在浏览器中创建矢量图形的简单库。
普通英语JavaScript (JavaScript In Plain English)
Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!
您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！
翻译自: https://medium.com/javascript-in-plain-english/vector-graphics-with-raphaeljs-3355e82b0fd3
raphaeljs
http://www.taodudu.cc/news/show-3175930.html
相关文章：
- raphael.js arrow颜色修改
- Raphael JS
- RaphaelJS一些细节的学习
- Raphael属性方法小结一
- Raphael绘制流程图(一)，添加可拖动的图形
- 快速上手RaphaelJS
- 连接宽带出现：调制解调器出现一个错误
- 学校宽带被远程计算机终止,宽带连接被远程计算机终止是什么意思
- 学校宽带被远程计算机终止,宽带连接提示连接被远程计算机终止怎么解决
- 台式电脑连接宽带远程计算机没反应怎么办,怎么处理宽带连接提示连接被远程计算机终止？...
- 家里宽带628连不上_宽带连接连接不上怎么办
- 宽带连接远程计算机没反应6,宽带连接正在连接通过WAN微型端口错误678的解决办法...
- 电脑无线不显示宽带不能连接服务器,电脑上网为什么只显示宽带连接不显示无线网络连接？...
- win7怎么连接不上宽带连接服务器未响应,win7宽带自动断开连接怎么办 win7宽带连接不上的快速解决方法...
- 移动宽带无法连接微软服务器,无法连接到移动宽带 - Windows Client | Microsoft Docs...
- 电脑上总显示宽带连接服务器怎么办啊,宽带连接不上_10招解决方法轻松搞
- 所有系统如何创建宽带连接服务器,如何设置本地连接和宽带连接(打印机).doc
- 汽车行业每周新闻纵览
- 2020年中国汽车电子软件行业发展现状、竞争格局及未来发展趋势分析，“软件定义汽车”重构汽车产业格局「图」
- 汽车行业OTD业务模式入门学习
- 汽车嵌入式软件面试问题整理
- 汽车软件的SOA理解
- 越客汽车美容管理软件 汽车行业专用软件
- 汽车电子行业开发者的内功心法：汽车软件开发V模型
- 汽车行业数字化转型：时代巨变下的新机遇
- 汽车电子软件开发相关标准
- 汽车管理软件以及成功案例
- “软件”占领汽车行业，传统汽车业面临淘汰？
- 汽车中的软件测试（一）
- 软件定义汽车：架构分析
raphaeljs_矢量图形与raphaeljs相关推荐
- 区块链产业生态发展情况-中国区块链产业生态发展
2019以来中国区块链产业处于蓬勃发展期,从中央到地方有关区块链发展的指导意见和扶持政策不断发布.据不完全统计,今年上半年全国共有超过23个省市发布了112条涉及区块链的政策信息,多省市把区块链纳入发 ...
- 快速上手RaphaelJS-Instant RaphaelJS Starter翻译（一）
(目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter. ...
- 快速上手RaphaelJS
原文: 快速上手RaphaelJS-Instant RaphaelJS Starter翻译 http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_S ...
- 在GDI+中用Mattix类对2D矢量图形进行平移、缩放操作
在GDI+中用Mattix类对2D矢量图形进行平移.缩放操作 1. GDI+中点坐标的格式及矩阵乘法的定义 GDI+中的的点按照1行3列的格式,即(x坐标,y坐标,1),其中1为哑元坐标.变换矩 ...
- [转] C#中绘制矢量图形
无涯 原文 C# 绘制矢量图形 [原创] 近来参与了一个项目,软件主要的功能就是使用C#画矢量图,然后导出到Word.Excel.Powerpoint中,并且能够再次被编辑.以下是我们的解决过程: 首 ...
- 在html页面中加入矢量图,HTML5画布矢量图形？
有一些选择. 我没有使用过任何一个库,但是据我所知,Cake看起来通常更令人印象深刻,并且可以导入,但也大了三倍. 还有Burst Engine,目前是processing.js的扩展,甚至更小. 我 ...
- g标签 怎么设置svg_SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签
今天主要谈一下SVG的特殊效果 其实和canvas都是差不多的,只不过是利用XML标签 用的不是很多但是以防以后万一用到还是整理一下 图片添加 svg中也可以添加图片 注意这里是image标签而不是我 ...
- scratch绘制多边形_如何使用Scratch 3绘制矢量图形
scratch绘制多边形 Scratch是一种流行的视觉编程语言,用于创建视频游戏和动画. 它还具有矢量绘图工具,任何人都可以使用它来创建独特的游戏资产和艺术品. Scratch 1.0用Smallt ...
- SVG可伸缩的矢量图形
SVG可伸缩的矢量图形 SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述.即对矢量图的描述 在此安利一个svg绘图的网址,可以直接手动绘图,然后生成相关的svg描述,即可实现图 ...
最新文章
- WPF 支持分组互斥的 RadioButton 式单选菜单
- CodeForces786B 线段树 + 最短路
- kamctl start
- opencv学习笔记（二）：基于肤色的人手检测
- 《2020雇佣关系趋势报告》今发布：近三成受访者兼职，近七成工作量增加、考核变严格
- U3D SCENEMANAGER.LOADSCENE是半异步的
- win7下安装IIS7.0及部署VS2010 ASP.NET程序网站的相关问题
- shell之什么时候使用shell以及最简单的shell程序
- eventfd（三）
- oracle 如何创建job,oracle创建job
- No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK? 问题
- 飞鸽传书写每行都认认真真
- mysql怎么添加默认约束_分享知识-快乐自己：MySQL中的约束,添加约束,删除约束,以及一些其他修饰...
- appium+python 【Mac】Android夜神模拟器
- windows中squid更改默认安装路径配置说明
- php扩展leonis,LNMP环境部署
- VS 2013安装教程
- AlphaControls TsSkinManager 控件
- 2019年成都房产新政，有这些内容需注意
- 携程数据分析笔试第一题