2.0.0 • Published 3 years ago
svg-webgl-loader v2.0.0
English | 简体中文
svg-webgl-loader
Introduction
svg-webgl-loader, a tool for rendering svg on canvas(webgl).
Installation
npm/yarn
npm i svg-webgl-loader
yarn add svg-webgl-loader
CDN
<script src="https://unpkg.com/svg-webgl-loader/dist/js/index.umd.js"></script>
If you need a specific version, such as version 1.0.1, you can add the version number:
<script src="https://unpkg.com/svg-webgl-loader@1.0.1/dist/js/index.umd.js"></script>
Usage
import svgLoader from "svg-webgl-loader";
import svgUrl from "./img/test.svg";
// load and parse svg data
const svgData = await svgLoader(svgUrl);
// paint
svgData.draw({
canvas,
loc: {
x: 0,
y: 0,
width: 300,
height: 300
},
})
If necessary, you can modify the background color through:
let gl = canvas.getContext('webgl'); gl.clearColor(1, 1, 1, 1); gl.clear(gl.COLOR_BUFFER_BIT);
API
draw
usage:
const svgData = await svgLoader(svgUrl); svgData.draw(drawParams)
interface drawParams { canvas: HTMLCanvasElement, // the canvas to be rendered on loc?: { // location for painting x: 0, y: 0, width?: 300, // width for painting,default is the width of svg height?: 300 // height for painting, default is the height of svg }, config?: { needTrim?:true, // whether need to erase, default value is false needFill?: true, // whether need to fill svg, default value is true needStroke?: true // whether need to stroke svg, default value is true } }
Remark
svg-webgl-loader mainly refers to the scheme of rendering svg in three.js: parse the paths, discrete paths to points and triangulate, then the svg would be analyzed to many triangles, so that it can be rendered by the webgl shader.