• 【SVG.js实战篇】01Vue中优雅的使用SVG.js


    SVG
    专栏收录该内容

    订阅专栏
    一、关于SVG.js
    SVG.js是一个基于SVG的开源JS库,支持操作 SVG 和执行 SVG 动画。真的很好用!(在实际项目场景中,使用SVG.js很便利友好)

    github仓库
    官方文档
    本文Demo源码
    二、安装
    // npm
    npm install @svgdotjs/svg.js
    // yarn
    yarn add @svgdotjs/svg.js

    1

    三、项目中引入
    import { SVG } from "@svgdotjs/svg.js"
    1
    四、绘制基础图形

    绘制图形之前,首先需要创建一个SVG.js可以用来识别的容器:

    <template>
    <div>
    <div id="simpleSquare"></div>
    </div>
    </template>
    1
    2
    接下来,可以愉快的开始绘制图形了:

    第一步: 使用SVG()API初始化一个SVG节点实例:
    let shapeModel = SVG().addTo("#simpleSquare").size("100%", "100%");`

    1
    2
    第二步,利用SVG提供的图形绘制方法绘制基础图形:
    绘制正方形

    shapeModel.rect(100, 100).attr({ fill: "#00B1B6" });


    绘制圆

    shapeModel.circle(100).radius(50).attr({ fill: "#0284A3" });


    绘制多边形

    shapeModel.polygon("0,0,100,50,50,100").fill("#175369") .stroke({ 1 });


    绘制线条

    shapeModel.line(0, 0, 100, 150).stroke({ 5, color: "#6488B7" });

    绘制自定义图形

    shapeModel.image('图片存储路径');

    绘制矢量Path路径(SVG的path路径绘制而成的图)

    shapeModel.path("M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z").fill("#495975");


    本文Demo源码传送门

  • 相关阅读:
    二维动态规划(2)
    细节是否真的打败爱情,十年后你还会爱我吗?
    C++的四种cast操作符的区别类型转换
    纯虚函数
    二维动态规划
    1,2,...n n个数m个丢失,找出丢失的数
    虚拟内存管理技术
    C++ 面试题总结
    【转】图的邻接链表 adjacent list of graph
    CIOCPServer的数据结构定义及内存池方案
  • 原文地址:https://www.cnblogs.com/onesea/p/15292991.html
Copyright © 2020-2023  润新知