跳至主要内容

Web API从零开始——SVG

SVG 是我基本没有用过的知识块，所以这里也是边分享边学习，尽量在我自己理解的基础上来分享。

1 概念

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）；其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

上面是 SVG 代码直接插入网页的例子。

SVG 代码也可以写在一个独立文件中，然后用 、、、 、 标签插入 SVG文件，可以获取 SVG DOM：

const svgObject = document.getElementById('object').contentDocument; const svgIframe = document.getElementById('iframe').contentDocument; const svgEmbed = document.getElementById('embed').getSVGDocument();

注意，如果使用 标签插入 SVG文件，就无法获取 SVG DOM。

3.3 读取 SVG 源码

由于 SVG文件就是一段 XML文本，因此可以通过读取 XML代码的方式，读取 SVG源码，这里还使用上面点击放大圆圈的例子：

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" > <circle id="mycircle" cx="400" cy="300" r="50" /> </</span>svg>

使用 XMLSerializer 实例的 serializeToString() 方法，获取 SVG元素的代码：

const svgString = new XMLSerializer() .serializeToString(document.querySelector('svg'));

3.4 SVG 图像转为 Canvas 图像

首先，需要新建一个 Image对象，将 SVG图像指定到该 Image对象的 src属性：

const img = new Image(); const svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); const DOMURL = self.URL || self.webkitURL || self; let url = DOMURL.createObjectURL(svg); img.src = url;

然后，当图像加载完成后，再将它绘制到 元素：

img.onload = () => { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); };

3.5 实例：散点图

下面将一张数据表格画成简单的散点图：

Date |Amount -----|------ 2014-01-01 | $10 2014-02-01 | $20 2014-03-01 | $40 2014-04-01 | $80

上面的图形，可以画成一个坐标系，Date作为横轴，Amount作为纵轴，四行数据画成一个数据点：

<svg width="350" height="160"> <g class="layer" transform="translate(60,10)"> <circle r="5" cx="0" cy="105" /> <circle r="5" cx="90" cy="90" /> <circle r="5" cx="180" cy="60" /> <circle r="5" cx="270" cy="0" /> <g class="y axis"> <line x1="0" y1="0" x2="0" y2="120" /> <text x="-40" y="105" dy="5">$10</</span>text> <text x="-40" y="0" dy="5">$80</</span>text> </</span>g> <g class="x axis" transform="translate(0, 120)"> <line x1="0" y1="0" x2="270" y2="0" /> <text x="-30" y="20">January 2014</</span>text> <text x="240" y="20">April</</span>text> </</span>g> </</span>g> </</span>svg>

标签：

评论

发表评论

此博客中的热门博文

Node.js从零开始——事件、系统和流

毕竟不是一个真正的教程，这里主要还是以普及和介绍为主，所以这一部分就是 Node.js 的其他部分介绍了，主要也就是事件触发、操作系统以及流的知识。 1 事件触发器 因为我们之前在浏览器中使用 JavaScript ，所以知道 JS 通过事件处理了许多用户的交互：鼠标的单击、键盘按钮的按下、对鼠标移动的反应等等。 在后端， Node.js 也提供了使用 events 模块 构建类似系统的选项。 具体上，此模块提供了 EventEmitter 类，用于处理事件。 使用以下代码进行初始化： const EventEmitter = require ( 'events' ); const eventEmitter = new EventEmitter (); 该对象公开了 on 和 emit 方法： emit 用于触发事件 on 用于添加回调函数（会在事件被触发时执行） 例如，创建 start 事件，并提供一个示例，通过记录到控制台进行交互： eventEmitter . on ( 'start' , () => { console . log ( '开始' ); }); 当运行以下代码时： eventEmitter . emit ( 'start' ); 事件处理函数会被触发，且获得控制台日志。 可以通过将参数作为额外参数传给 emit() 来将参数传给事件处理程序： eventEmitter . on ( 'start' , number => { console . log ( `开始 ${ number } ` ); }); eventEmitter . emit ( 'start' , 23 ); 多个参数： eventEmitter . on ( 'start' , ( start , end ) => { console . log ( `从 ${ start } 到 ${ end } ` ); }); eventEmitter . emit ( 'start' ,
发表评论
阅读全文

Node.js从零开始——HTTP 服务器

其实 Node.js 最初的目的，就是实现一个完全可以由 JavaScript 来进行开发的服务器端，所以归根到底，它的后端能力之一就是实现一个 HTTP 服务器，这里我们来看看它。 1 搭建 HTTP 服务器 其实前面我们已经看过了一个例子，不过这里再来看一个 HTTP web 服务器的例子： const http = require ( 'http' ); const port = 3000 ; const server = http . createServer (( req , res ) => { res . statusCode = 200 ; res . setHeader ( 'Content-Type' , 'text/plain' ); res . end ( '你好世界\n' ); }) server . listen ( port , () => { console . log ( `服务器运行在 http:// ${ hostname } : ${ port } /` ); }); 简要分析一下： 这里引入了 ref=" http:// nodejs.cn/api/http.html ">http 模块：使用该模块来创建 HTTP 服务器 服务器被设置为在指定的 3000 端口上进行监听， 当服务器就绪时，则 listen 回调函数会被调用 传入的回调函数会在每次接收到请求时被执行， 每当接收到新的请求时， "http://nodejs.cn/api/http.html#http_event_request">request 事件 会被调用，并提供两个对象：一个请求（ http.IncomingMessage 对象）和一个响应（ http.ServerResponse 对象） request 提供了请求的详细信息， 通过它可以访问请求头和请求的数据， response 用于构造要返回给客户端的数据；在此示例中： res . statusCode = 200 ; 设置 status
发表评论
阅读全文