canvg, 在画布上,Javascript SVG解析器和渲染器

分享于 

4分钟阅读

GitHub

  繁體 雙語
Javascript SVG parser and renderer on Canvas
  • 源代码名称:canvg
  • 源代码网址:http://www.github.com/canvg/canvg
  • canvg源代码文档
  • canvg源代码下载
  • Git URL:
    git://www.github.com/canvg/canvg.git
    Git Clone代码到本地:
    git clone http://www.github.com/canvg/canvg
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/canvg/canvg
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    简介

    canvg是一个SVG解析器和渲染器。 文件采用一个URL到SVG文件或者SVG文件的文本,用JavaScript解析它,并将结果呈现在一个画布中的元素。 示例的渲染速度与原生SVG的速度一样快。

    什么是实现的?

    最终目标是从 SVG规范。 大多数渲染和动画都在工作。 如果你希望看到实现的功能,请随时联系我或者将它的添加到问题列表中。

    的潜在用途
    • 通过 JavaScript ( w/o 请求另一个文件或者中断验证) 允许 inline 嵌入 SVG
    • 支持跨所有支持Canvas的浏览器的单一SVG版本
    • 允许支持Canvas但不支持SVG的移动设备呈现 SVG
    • 允许在客户端( 通过 toDataUrl ) 实现 SVG -> Canvas -> png过渡
    示例演示

    在这里,视图在 Chrome。Firefox。Opera 和 IE 中进行测试( 通过 FlashCanvas )

    jsfiddle游乐场

    用法

    在页面中包含以下文件:

    
    
    
    
    <script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
    
    
    <script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
    
    
    <script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script> 
    
    
    
    

    在页面上放置画布

    
    
    
    
    <canvas id="canvas" width="1000px" height="600px"></canvas> 
    
    
    
    

    示例canvg调用:

    
    
    
    
    <script type="text/javascript">
    
    
    window.onload = function() {
    
    
     //load '../path/to/your.svg' in the canvas with id = 'canvas'
    
    
     canvg('canvas', '../path/to/your.svg')
    
    
    
    
    
     //load a svg snippet in the canvas with id = 'drawingArea'
    
    
     canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
    
    
    
    
    
     //ignore mouse events and animation
    
    
     canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true }) 
    
    
    }
    
    
    </script>
    
    
    
    

    第三个参数是选项:

    • 日志:true => console.log 信息
    • ignoreMouse: true => 忽略鼠标事件
    • ignoreAnimation: true => 忽略动画
    • ignoreDimensions: true => 不尝试调整画布大小
    • ignoreClear: true => 不清除画布
    • offsetX: int => 在x 偏移处绘制
    • offsetY: int => 在y 偏移处绘制
    • scaleWidth: int => 水平缩放至宽度
    • scaleHeight: int => 垂直缩放到高度
    • renderCallback: 函数=> 在第一次渲染完成后调用函数
    • forceRedraw: 函数=> 将在每个帧上调用函数,如果返回 true,将重绘
    • useCORS: true => 将尝试在图像上使用CORS来不污染画布

    你可以调用不带参数的canvg来替换页面上的所有svg图像。 参见示例

    画布上下文还有一个内置的扩展方法,可以绘制类似于 drawImage的方式:

    
    
    
    
    var c = document.getElementById('canvas');
    
    
    var ctx = c.getContext('2d');
    
    
    ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);
    
    
    
    
    相关知识库

    JAVA  Javascript  PAR  parse  parser  CAN  
    相关文章