深度掌握SVG路径path的贝塞尔曲线指令

又又一次说起贝塞尔曲线(英语:Bézier curve维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完全不能承受富有创意的创作的,至少得有我当年追我老婆的脸皮厚才行。

SVG之旅:路径

通过上一节的学习,我们知道了怎么在SVG中绘制一些基本的图形。在SVG中除了可以通过<rect><circle><ellipse><polygon><line><polygon>来绘制矩形、圆形、椭圆、多边形、直线和折线等形状。除此之外,在SVG中还有一个<path>元素,可以帮助我们在SVG中绘制任何你想要的形状。也有人说,掌握了SVG中的<path>是学习SVG的重中之重。今天我们来了解SVG中有关于<path>的相关知识。

SVG之旅:基本形状

在未学习SVG之前,在Web页面或Web应用中使用一些基本形状一般都是通过CSS的border来模拟或者clip-path来绘制图形形状,也有使用Canvas来绘制。当然也有很多时候直接使用img或者background-image直接来引用图形。而在SVG中,提供了更为强大的图形形状的能力,可以直接通过SVG来绘制矩形圆角矩形圆形多边形曲线等。如果对Illustrator或者Sketch可以很轻松的绘制出基本形状,然后导出SVG文件。今天我们主要来了解在SVG中怎么通过代码来绘制基本形状。

Vue 2.0学习笔记:使用$refs访问Vue中的DOM

通过前面对Vue的学习,到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前,我们先看看模板。

优雅的轮廓与 SVG paint-order

SVG 渲染使用 painter 的模型来描述图像如何渲染到屏幕。像墙上的油漆层,上层的内容遮盖下层的内容。SVG 规范定义了哪些内容会绘制在其他内容之上。每个形状的不同部分 —— stokefillmarker —— 每个都创建绘制层。这些形状绘制在其他层之上,层的顺序就是他们在文档中被定义的顺序。两个新的属性被引入 SVG2 规范,他们是 z-indexpaint-order,允许你改变渲染规则。

SVG之旅:SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML的DOM中,其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次,而DOM中需要依赖于CSS的z-index属性来控制他的层次关系。其实在SVG中,他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。

SVG之旅:SVG简介

自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因,并没有对SVG进行系统化的学习,在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识,并尝试在项目中使用SVG,有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识,希望在几个月后,这方面的技术有所突破。

Vue 2.0学习笔记:自定义指令

在Vue中为了更好的操作DOM元素,其内置了一些指令,比如v-modelv-ifv-showv-textv-htmlv-forv-bind等。除此之外,Vue也允许注册自定义指令。这些自定义指令可以说我们对普通DOM元素进行底层操作。比如@SARAH DRASNER写的一篇有关于Vue自定义指令的文章,简单易懂。今天自己也仔细撸了一下Vue中怎么实现自定义的指令。

Hexi Flexi Grid Layout

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中,我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局,但这些在实际的布局中使用场景并不常见。最近@vmcreativeHexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。

Vue 自定义指令的魅力

在你初次接触一个新的JavaScript框架时,会像第一次进糖果店的孩子一样。给啥拿啥,而更直接点,有些东西可以让你更容易成为一个开发者。不可避免的是,我们在用框架时都会有一个同感,就是总有些场景是框架不能帮我们完成的。Vue框架的漂亮之处在于它的功能非常强大,虽然这个框架的指令不够面面俱到,但也能在开发上助你一臂之力了,因为创建一个自定义指令是很轻松的。

页面

返回顶部