当前位置： 文江博客 Node Package Readme 5stars 中文文档教程

5stars 中文文档教程

发布于 5年前 浏览 30 更新于 3年前

5star

:star::star::star::star::star：

基于 SVG 技术的实用工具，可快速生成 5 星评级。

中文文档

Features

  • supports display and click modes.
  • optimizes SVG files by sogo.
  • supports remote url file and local file.
  • generates fast.
  • supports configuration and cli usages.

Warn :warning:

  • normal svg file and active svg file must be the same size, the both files are required as well.
  • normal svg file and active svg file need to be filled，in order to ensure 'click' mode work.

Try it out

  • display mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji.svg -s 20

output-emoji.svg

  • click mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji-click.svg -m click -s 20

output-emoji-click.svg

Getting started

  • If there is the following directory structure: examples
  examples
  ├── config.json
  ├── star-active.svg
  └── star-normal.svg
  • config.json
  {
    "normal": "star-normal.svg",
    "active": "star-active.svg",
    "space": 0,
    "width": "auto",
    "height": "auto",
    "computeSpace": true,
    "mode": "display",
    "output": "output.svg"
  }
  • run the following command in current directory examples
  ➜  examples git:(master) ✗ npx 5stars
  5stars  start generating ...
          complete reading star-active.svg
          complete reading star-normal.svg
          complete creating new symbol element star-a
          complete creating new symbol element star-b
          start to output output.svg
          done!

  • output.svg

    output

Usage

npx 5stars # use default config.json
npx 5stars -c yourConfigFile
npx 5stars --a star-normal.svg --b star-active.svg
  • display mode
  <!-- output.svg -->
  <svg class="5stars-svg" data-width="0.5" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
  viewBox="0 0 309.335 53.867">
    <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
    <!-- content -->
  </svg>

操作output.svg 如何通过输出 svg 的 data-width="0.5" 属性显示。

下面的输出是data-width="0.7":

  • click mode
  <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
  viewBox="0 0 309.335 53.867">
    <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
    <!-- content -->
  </svg>

如果你想控制点击操作什么时候结束，你可以覆盖 window._5stars_click_cb_(n)：

  window._5stars_click_cb_ = function (n) {
    // end click operation when returning true
    return n == 5;
  }

示例

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>5stars click mode</title>
  </head>
  <body>
    <script>
    window._5stars_click_cb_ = function (n) {
      // end click operation when returning true
      return n == 5;
    }
    </script>

    <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%"
    viewBox="0 0 269.335 53.867">
      <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
      <!-- content -->
    </svg>
  </body>
  </html>

config options

// defaults
const config = {
  // normal svg file
  normal: undefined,
  // active svg file
  active: undefined,
  // space between stars
  space: 0,
  // width of normal and active svg files
  width: 'auto',
  // height of normal and active svg files
  height: 'auto',
  // output path
  output: './output.svg',
  // if space isn't included on computing svg width.
  computeSpace: false,
  // generation mode: display | click
  mode: 'display'
};
  • normal: normal svg file, required.
  • active: active svg file, required.
  • space: space between stars.
  • width: width of normal and active svg files.
  • height: height of normal and active svg files.
  • output: output path relative to current directory.
  • computeSpace: if space isn't included on computing svg width.
  • mode: generation mode
  • display
  • click

CLI

Usage: 5stars [options]

Options:
  -v, --version           output the version number
  -c, --config [config]   config file
  -a, --normal [normal]   normal svg file
  -b, --active [active]   active svg file
  -s, --space [space]     space between stars
  --width [width]         width of normal and active svg files
  --height [height]       height of normal and active svg files
  -o, --output [output]   output path
  -m, --mode [mode]       generation mode
  -M, --no-compute-space  if space is not included on computing svg width.
  -h, --help              output usage information

Examples:

  $ 5stars # use default config.json
  $ 5stars -c yourConfig.json
  $ 5stars -a star-normal.svg -b star-active.svg

License

麻省理工学院。

原文

5star

:star::star::star::star::star:

A quickly generating 5 stars for rating based on SVG technique utility tool.

CHINESE DOC

Features

  • supports display and click modes.
  • optimizes SVG files by sogo.
  • supports remote url file and local file.
  • generates fast.
  • supports configuration and cli usages.

Warn :warning:

  • normal svg file and active svg file must be the same size, the both files are required as well.
  • normal svg file and active svg file need to be filled，in order to ensure 'click' mode work.

Try it out

  • display mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji.svg -s 20

output-emoji.svg

  • click mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji-click.svg -m click -s 20

output-emoji-click.svg

Getting started

  • If there is the following directory structure: examples
  examples
  ├── config.json
  ├── star-active.svg
  └── star-normal.svg
  • config.json
  {
    "normal": "star-normal.svg",
    "active": "star-active.svg",
    "space": 0,
    "width": "auto",
    "height": "auto",
    "computeSpace": true,
    "mode": "display",
    "output": "output.svg"
  }
  • run the following command in current directory examples
  ➜  examples git:(master) ✗ npx 5stars
  5stars  start generating ...
          complete reading star-active.svg
          complete reading star-normal.svg
          complete creating new symbol element star-a
          complete creating new symbol element star-b
          start to output output.svg
          done!

  • output.svg

    output

Usage

npx 5stars # use default config.json
npx 5stars -c yourConfigFile
npx 5stars --a star-normal.svg --b star-active.svg
  • display mode
  <!-- output.svg -->
  <svg class="5stars-svg" data-width="0.5" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
  viewBox="0 0 309.335 53.867">
    <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
    <!-- content -->
  </svg>

manipulate output.svg how to display by data-width="0.5" attribute of the output svg.

The following output is data-width="0.7":

  • click mode
  <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
  viewBox="0 0 309.335 53.867">
    <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
    <!-- content -->
  </svg>

If you want to control when the click operation ends, You can override window._5stars_click_cb_(n):

  window._5stars_click_cb_ = function (n) {
    // end click operation when returning true
    return n == 5;
  }

Example

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>5stars click mode</title>
  </head>
  <body>
    <script>
    window._5stars_click_cb_ = function (n) {
      // end click operation when returning true
      return n == 5;
    }
    </script>

    <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%"
    viewBox="0 0 269.335 53.867">
      <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
      <!-- content -->
    </svg>
  </body>
  </html>

config options

// defaults
const config = {
  // normal svg file
  normal: undefined,
  // active svg file
  active: undefined,
  // space between stars
  space: 0,
  // width of normal and active svg files
  width: 'auto',
  // height of normal and active svg files
  height: 'auto',
  // output path
  output: './output.svg',
  // if space isn't included on computing svg width.
  computeSpace: false,
  // generation mode: display | click
  mode: 'display'
};
  • normal: normal svg file, required.
  • active: active svg file, required.
  • space: space between stars.
  • width: width of normal and active svg files.
  • height: height of normal and active svg files.
  • output: output path relative to current directory.
  • computeSpace: if space isn't included on computing svg width.
  • mode: generation mode
  • display
  • click

CLI

Usage: 5stars [options]

Options:
  -v, --version           output the version number
  -c, --config [config]   config file
  -a, --normal [normal]   normal svg file
  -b, --active [active]   active svg file
  -s, --space [space]     space between stars
  --width [width]         width of normal and active svg files
  --height [height]       height of normal and active svg files
  -o, --output [output]   output path
  -m, --mode [mode]       generation mode
  -M, --no-compute-space  if space is not included on computing svg width.
  -h, --help              output usage information

Examples:

  $ 5stars # use default config.json
  $ 5stars -c yourConfig.json
  $ 5stars -a star-normal.svg -b star-active.svg

License

MIT.

更多

你可能也喜欢

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文