NPM 包 geometrizejs-extra 使用教程

在前端开发中，使用现有的开源库和工具可以大大提高开发效率和质量。geometrizejs-extra 是一个使用纯 JavaScript 实现的库，可以将图片转换为 SVG 图形。本教程将会详细介绍如何使用它来实现有趣的效果。

什么是 geometrizejs-extra?

geometrizejs-extra 是一个基于 geometrizejs 库的封装，它可以将图片转换为一系列的三角形、圆形、矩形等图形，并以 SVG 格式导出。它具有以下特点：

  • 可以生成较为简单和复杂的图形
  • 支持自定义颜色和形状
  • 生成的 SVG 可以轻松嵌入 HTML 中

安装 geometrizejs-extra

使用 NPM 进行安装：

--- ------- ------------------

或者使用 Yarn：

---- --- ------------------

使用示例

生成三角形

------ - ---------- - ---- ---------------------

----- ----- - --- --------
--------- - --------------------

------------ - -- -- -
  ----- ---------- - --- ------------------
  ------------------------
    ----------- - ---------- --
    ----------- ---
    ------ - -- -- - -- -- --
  -- ----- -- -
    ------------------------------------------- - ---- -- ---- --- --- --- -
  ---
--

以上代码将生成一个包含 50 个红色三角形的 SVG。

生成圆形

------ - ---------- - ---- ---------------------

----- ----- - --- --------
--------- - --------------------

------------ - -- -- -
  ----- ---------- - --- ------------------
  ------------------------
    ----------- - -------- --
    ----------- ---
    ------ - -- -- - -- -- --
  -- ----- -- -
    ------------------------------------------- - ----
  ---
--

生成的是 50 个绿色圆形。

生成矩形

------ - ---------- - ---- ---------------------

----- ----- - --- --------
--------- - --------------------

------------ - -- -- -
  ----- ---------- - --- ------------------
  ------------------------
    ----------- - ----------- --
    ----------- ---
    ------ - -- -- - -- -- --
  -- ----- -- -
    ------------------------------------------- - ----
  ---
--

生成的是 50 个蓝色矩形。

自定义形状和颜色

除了内置的形状外，geometrizejs-extra 还支持自定义形状和颜色。

------ - ---------- - ---- ---------------------

----- ----- - --- --------
--------- - --------------------

------------ - -- -- -
  ----- ---------- - --- ------------------
  ------------------------
    ----------- - -------- --
    ----------- ---
    ------ - ---- -- - --
    ------------- -
      --------- -- -- ------ -- -
        ----------------- - ----------------- ------------ --------------
        --------------------
        ----- ---- - ---
        ---------------- - ----- - - ------
        ---------------- - ----- - - ------
        ---------------- - ----- ---
        ---------------
      -
    --
  -- ----- -- -
    ------------------------------------------- - ----
  ---
--

以上代码将会生成一个包含 50 个自定义形状的 SVG，自定义形状是一个由三条线构成的箭头。

总结

geometrizejs-extra 是一个方便使用的图片转换工具，可以帮助我们快速生成有趣的图形。本文介绍了如何使用该库来生成三角形、圆形、矩形以及自定义形状，同时也提供了具体的代码示例。希望读者通过本文的介绍，能够更好地掌握 geometrizejs-extra 的使用方法，进而提高自己的开发效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067357890c4f7277583d9e

阅读全文

猜你喜欢

  • npm 包 @uiowa/uiowa-account 使用教程

    简介 @uiowa/uiowa-account 是一个用于处理用户认证的 npm 包。该包内部封装了一些常见的认证方法和技术，使得前端开发人员可以轻松地处理用户认证流程。

    4 年前
  • npm 包 @arve.knudsen/libp2p-circuit 使用教程

    简介 @arve.knudsen/libp2p-circuit 是一款为 libp2p 网络提供多协议连接和穿越 NAT 的 npm 包。它基于 libp2p-swarm 库的底层特性，支持使用任何 ...

    4 年前
  • npm 包 ng-interpolated-charts 使用教程

    当今的Web开发中，前端技术扮演着越来越重要的角色。而在前端领域中，Angular框架已经成为了很多前端开发者的首选。但是，在开发过程中，难免会遇到需要使用图表的情况。

    4 年前
  • npm 包 element-theme-chalk-home 使用教程

    在前端开发中，UI 组件库扮演着至关重要的角色。而在这些组件库中，element-ui 是深受开发者喜欢的一种。它除了提供基础组件外，还提供了一系列的主题样式供使用。

    4 年前
  • npm 包 listate 使用教程

    在前端开发中，状态管理是必不可少的一项技能。传统的状态管理方式通常需要写大量的冗余代码，且难以维护。因此，使用状态管理库，能够大大提高开发效率。而 listate 就是一个功能强大的状态管理库，旨在让...

    4 年前
  • npm 包 @arve.knudsen/libp2p-switch 使用教程

    @arve.knudsen/libp2p-switch 是一个用于构建点对点网络的 JavaScript 库。它提供了一个简洁而强大的接口，用于管理节点之间的连接和通信。

    4 年前
  • npm 包 dot-beat-time 使用教程

    在前端开发中，时间戳是非常常见的一种数据格式。而在一些特殊的场合下，我们需要将时间戳转化为以点分隔的字符串，这时候就需要用到 dot-beat-time 这个 npm 包了。

    4 年前
  • npm 包 @arve.knudsen/peer-book 使用教程

    简介 @arve.knudsen/peer-book 是一个基于 Peer-to-Peer 网络技术开发的前端库，能够实现去中心化的图书分享和借阅功能。本文将介绍如何安装使用此 npm 包。

    4 年前
  • npm 包 @arve.knudsen/libp2p-bootstrap 使用教程

    说明 @arve.knudsen/libp2p-bootstrap 是一个用于 libp2p 的 Bootstrap 模块。在使用 libp2p 进行 P2P 网络开发时，Bootstrap 节点是必...

    4 年前
  • npm 包 onix-board 使用教程

    简介 onix-board 是一个基于 React 的 UI 组件库，通过 npm 包的方式方便前端开发者使用。它提供了多个常见 UI 组件，包括按钮、输入框、下拉框等等，以及一些复杂的组件，如 Ta...

    4 年前
  • npm 包 gemboot 使用教程

    在前端开发过程中，有时我们需要使用一些开源的工具来帮助我们快速搭建项目或者提升开发效率。而 npm 包是我们常用的一种工具，其中 gemboot 包是适用于快速搭建响应式管理后台的一款工具。

    4 年前
  • npm 包 edisontkpcom 使用教程

    随着 Web 前端技术的快速发展，开发人员需要不断地学习和应用新技术和工具。其中，npm (Node Package Manager) 是一个非常重要的工具，用来管理 Node.js 模块，也是前端开...

    4 年前
  • npm 包 @enface/js 使用教程

    在 Web 前端开发中，经常会用到各种基础的 JavaScript 工具和框架，比如 jQuery、React、Vue 等。但有些时候，我们需要使用特定的功能或定制化的代码来解决问题，这时候就需要用到...

    4 年前
  • npm 包@arve.knudsen/libp2p-kad-dht 使用教程

    什么是@arve.knudsen/libp2p-kad-dht？ @arve.knudsen/libp2p-kad-dht 是一个 npm 包，它是基于 libp2p 协议的分布式哈希表。

    4 年前
  • NPM 包 express-knex-mailer 使用教程

    介绍 本文将会介绍使用 npm 包 express-knex-mailer 来发送邮件的方法。Express-knex-mailer 是一个基于 Knex.js 和 NodeMailer 的日志邮件发...

    4 年前
  • npm 包 @arve.knudsen/libp2p 使用教程

    什么是 @arve.knudsen/libp2p？ @arve.knudsen/libp2p 是一个基于 Node.js 的开源项目，该项目提供了一种用于跨节点通信的分布式网络协议。

    4 年前
  • npm 包 javascript-compiling-tokenizer 使用教程

    前言 在前端开发中，我们经常会遇到需要对 JavaScript 代码进行语法解析的需求。为此，一些诸如 Esprima、babel-parser 等 JavaScript 解析器/library 应运...

    4 年前
  • npm 包 mida 使用教程

    背景 前端工程师在进行数据分析时常常需要使用各种格式的数据进行分析，那么如何方便地读取这些数据呢？这时，一个名为 mida 的 npm 包就能够派上用场了。 简介 mida 是一个用于读取和解析各种格...

    4 年前
  • npm 包 node-mailarchiva 使用教程

    前言：在日常工作中，邮件管理是不可避免的任务之一。在这篇文章中，我将介绍一个 npm 包：node-mailarchiva，它提供了一种简单且可定制化的方法来管理你的邮件。

    4 年前
  • npm 包 relative-time-parser 使用教程

    相信广大前端开发者在项目中经常需要处理各种时间格式，如何将时间格式化成易懂的相对时间是一个难题。这时候一个 npm 包 relative-time-parser 就可以派上用场了。

    4 年前

相关推荐

    暂无文章