微信号:gh_15d32a71b93c

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

引入GraphicsJS,一个强大的轻量级图形库

2017-02-28 08:20 web前端程序员

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

    HTML5是现代网络的骨干。当涉及到创建交互式图像时,SVG和Canvas通常是首选的技术 - Flash已被遗忘。至于Silverlight,则是一个罕见的住在网络郊区的独角兽。如今,很少有人记得第三方插件。

    当然,各自的优点和缺点都有详细的文档介绍,但简而言之,SVG更适合创建和处理交互式元素。这是因为SVG是基于XML的矢量格式,当使用<svg>标记将图像加载到页面中时,其中的每个元素在SVG DOM中都是可用的。

    在本文中,我打算向您介绍GraphicsJS,一个新的强大的开源JavaScript绘图库,它基于SVG(对于旧的IE版本请使用VML回退)。我将首先简要介绍其基础知识,然后通过两个简短而又壮观的示例来展示库的功能:第一个是关于艺术的,第二个阐述如何编写简单的时间程序- 用不到50行写杀手艺术游戏。

    为什么是GraphicsJS

    有很多库可以用来帮助开发人员使用SVG:Raphaël,Snap.svg和BonsaiJS等命名好的js库。每一个都有自己的优势和弱点,那么对他们进行详细的比较就是另一篇文章的主题了。而这篇文章是关于GraphicsJS,所以让我解释什么是它的好和特别。

    首先,GraphicsJS是轻量级的,并有一个非常灵活的JavaScript API。它实现了许多文本功能,以及一个虚拟DOM - 从浏览器特定的HTML DOM实现中分离出来。

    其次,它是一个新的开源JavaScript库,去年秋天由交互式数据可视化领域的全球领先软件开发商之一AnyChart发布。AnyChart已经在其专有产品中使用GraphicsJS呈现图表至少三年(自AnyChart 7.0发布以来),因此GraphicsJS已经完全经过测试。(免责声明,我是AnyChart的研发主管和GraphicsJS的主要开发人员)

    第三,与AnyChart的JavaScript图表库不同,GraphicsJS可以在商业和非盈利项目中免费使用。它在GitHub中根据Apache许可证可用。

    第四,GraphicsJS是跨浏览器兼容的,支持Internet Explorer 6.0+,Safari 3.0+,Firefox 3.0+和Opera 9.5+。它在旧版本的IE中渲染为VML,在所有其他浏览器中渲染为SVG。

    最后,GraphicsJS允许你结合图形和动画效果。查阅它的main gallery,其中包含动画的篝火,旋转星系,下雨,程序生成的叶子,可玩的15拼图等更多。GraphicsJS在其详细的文档和其全面的API参考中包含许多其他示例。

    GraphicsJS基础

    要从GraphicsJS开始,您需要引用库并为您的图形创建一个块级HTML元素:

    然后,您需要创建一个平台并在其中绘制一些东西,如矩形,圆形或其他形状:

    这里是CodePen的例子,我们再进一步,绘制死亡圣器符号。

    我们的第一个杰作

    填充,描边和图案填充

    任何形状或路径都可以使用填充设置和描边设置进行着色。一切东西都有一个线条(边框),但只有形状和封闭的路径可以被填充。填充和线条设置非常丰富,您可以直线或圆形渐变填充和描边。此外,线可以是虚线,并支持以几种平铺模式的图像填充。但所有这一切都是有一个标准的,你可以在几乎任何图书馆找到。使GraphicsJS特别的是它的孵化和图案填充功能,使您不仅可以使用32个可用的填充模式,还可以轻松创建自己的形状或文本的模式。

    现在,让我们看看什么是可能的!我打算画一个人站在房子附近的小图片,然后用不同的图案和颜色填充增强它。为了简单,让我们把它做成一个天真的艺术图片。这里:

    检查CodePen上的结果:https://codepen.io/SitePoint/pen/VPGQKx

    正如你所看到的,我们现在使用变量 - 所有在平台上绘制东西的方法都返回对创建的对象的引用,并且这个链接可以用来修改或删除对象。

    还要注意,利用在GraphicsJS中无处不在的链接来帮助如何缩短代码。链接(eg stage.path().moveTo(320, 330).lineTo(320, 340);)应该正确使用,使代码紧凑,更容易阅读。

    现在,让我们给这个着色页给一个子元素,让他们着色。因为即使是一个子元素也可以掌握以下技巧:

    这是例子现在的样子:https://codepen.io/SitePoint/pen/QdVQqb

    现在我们有一张在苏格兰高地上,一个男子穿着男用短裙站在砖城堡附近的一个稻草屋顶的照片。我们完全可以描出一部分腿,我们甚至可以走出来说,这是艺术的一小部分。让我们使用自定义的基于文本的图案填充:

如你所见,这是很容易做到的:你创建一个文本对象的实例,然后在阶段中形成一个模式,并将一个文本放入模式。

    在不到50行的代码中创建一个时间杀手的艺术游戏

    在本文的下一部分,我想向您展示如何使用GraphicsJS在不到50行的代码中创建一个Cookie Clicker类型的游戏。

    游戏的名称是“街道清道夫在风中”,并且玩家扮演一个清扫街道在一个多风的秋天下午的街道清扫车的角色。游戏使用一些代码从GraphicsJS库中生成叶子样本。

    你可以在CodePen上查看完成的游戏(或在文章的结尾)。

    图层面板,z-Index和虚拟DOM

    我们首先创建一个阶段(如前所述),然后声明一些初始变量

    对于这个游戏,我们将使用Layer - 一个用于在GraphicsJS中分组元素的对象。如果要对其应用类似的更改(如转换),则必须对元素进行分组。您可以在处于暂停模式时更改图层(稍后详细介绍),这可以提高性能和用户体验。

    在这个演示中,我们使用图层功能来帮助我们将叶子组合在一起,避免它们覆盖标签(告诉我们有多少被刷过)。为此,我们创建一个标签,然后调用该stage.layer方法,创建阶段绑定层。我们为此图层分配zIndex比标签更低的属性。

    我们首先创建一个阶段(如前所述),然后声明一些初始变量:

    在这之后,无论我们在图层中创建多少叶子,我们可以确保他们不会覆盖文本。

    转换

    接下来,让我们添加一个函数来绘制我们的叶子。这将使用方便的GraphicsJS转换API,允许您移动,缩放,旋转和剪切元素和元素组。当与图层和虚拟DOM结合使用时,这是一个非常强大的工具。

    你看到每个路径以相同的方式创建,但是然后被转换。这导致非常好的随机叶图案。

    处理事件

    GraphicsJS中的任何对象,阶段和图层都可以处理事件。支持的事件的完整列表在EventType API中可用。阶段有四个特殊事件来控制渲染。

    在这个游戏示例中,我们使用附加到叶对象的事件侦听器,以便当用户将鼠标悬停在其上时,它们逐个消失。为此,将以下代码添加到drawLeaves函数的底部,在语句之前return:

    “”在这里我们还可以看到,我们使用图层来计算叶子

    注意,我们实际上并不存储叶子的数量。由于叶子是我们添加到特定层中或从特定层中删除的路径,这使我们能够跟踪我们有多少个子元素(并因此保留多少叶子)。

    GraphicsJS提供了一个虚拟DOM,一个HTML DOM的抽象,轻量级的和独立于浏览器的SVG / VML实现。这对于做许多伟大的事情是有用的,例如跟踪所有对象和图层,应用变换到组,以及通过允许我们跟踪和控制呈现过程的方法的帮助优化呈现。

    性能优化

    虚拟DOM以及事件处理程序允许GraphicsJS用户控制呈现。在”性能”文章中,可以给你相关途径的想法。

    当在我们的游戏中生成树叶时,我们需要在添加新树叶时暂停呈现,并在所有更改完成后恢复它:

    这种处理新元素的方式使得新叶几乎立即出现。

    最后,调用shakeTree()。

    最终结果

    结果样式:http://codepen.io/SitePoint/pen/NdLMgB

    认识作者

    罗马·鲁布什金 

    Roman是一位经验丰富的Web开发人员,目前是AnyChart的研发主管,这是全球领先的交互式数据可视化解决方案提供商之一。他喜欢探索新技术,协调公司的所有调查活动,以及JavaScript(HTML5)图表库和相关组件的整个开发


英文原文:https://www.sitepoint.com/introducing-graphicsjs-a-powerful-lightweight-graphics-library/
译者:xie317743


 
web前端程序员 更多文章 使用CSS网格布局放置元素的7种方法 关于Javascript的一些细微优化 RxJS的动画介绍(上) 50个AJAX面试问答 如何在Reactjs中进行简单的表单验证
猜您喜欢 聊聊应用系统性能优化 Android开发技术周报 Issue#1 傅盛分享:走出事业低谷 老板让我们开发微信小程序…… 从DevOps中可供安全借鉴的五项经验