The recent H5 project needs the display of progress ring graph. After comparing the mainstream UI libraries in the industry, I find that they do not meet my needs, so I finally decide to use Canvas or SVG to achieve a wave by myself!
The UI design is attached
Canvas implementation
Svg implementation
– making address: circle – the progress
– NPM address: v – circle – the progress
Through practice, I finally decided to adopt SVG, since the view effect produced by Canvas is not very good (progress bar is blurred).
html
<svg
:width="width"
:height="width"
:viewbox="`0 0 ${width} ${width}`"
class="svgWrap"
>
<circle
:cx="width * 0.5"
:cy="width * 0.5"
:r="width * 0.4"
:stroke-width="width * 0.05"
stroke-linecap="round"
:stroke="backColor"
fill="none"
stroke-opacity="0.2"
:transform="` matrix (0, 1,1,0,0, ${width}) `"
:stroke-dasharray="` ${0.75 * (width * 0.4 * math.h PI * 2)} ${0.25 * (width * 0.4 * math.h PI * 2)} `"
>
</circle>
<circle
ref="progress"
:cx="width * 0.5"
:cy="width * 0.5"
:r="width * 0.4"
:stroke-width="width * 0.05"
stroke-linecap="round"
:stroke="lineColor"
fill="none"
:transform="` matrix (0, 1,1,0,0, ${width}) `"
:stroke-dasharray="dasharray"
>
</circle>
</svg>
Copy the codejs
data() {
return {
dasharray: ` 0The ${this.width * 0.4 * Math.PI * 2}`,}},mounted() {
this.draw(this.rate)
},
methods: {
draw(rate) {
this.$nextTick(() = > {
let per = 0.75 * rate
let circle = this.$refs['progress']
let perimeter = circle.getTotalLength() // The circumference of the ring
this.dasharray = perimeter * per + ' ' + perimeter * (1 - per)
})
}
}
Copy the codePublish component packages to NPM
Complete the following steps
I. Project initialization and configuration
1. Create a blank folder
Mkdir circleProgress // This folder is called circleProgressCopy the code2. Initialize the project: Go to the circleProgress folder and initialize the project. You will be prompted to fill in some information related to the project and follow the instructions. Nothing to say. For the name of the package, you can first go to nPMjs.com search for the same name, do not have the same name with the existing NPM library other NPM package, otherwise it will fail when sending NPM package!
npm init
Copy the codePackage. json dependencies: Since you use ES6 and Webpack, add at least the following dependencies to the devDependencies field
"DevDependencies ": {"babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-object-rest-spread": "^ 6.26.0", "Babel - plugin - transform - runtime" : "^ 6.23.0", "Babel - polyfill" : "^ 6.26.0", "Babel - preset - es2015" : "^ 6.24.1 CSS -", "loader" : "^ 0.28.7", "es6 - promise" : "^ 4.4.1", "less" : "^ 2.7.3", "less - loader" : "^ 4.0.5", "style - loader" : "^ 0.19.0", "url - loader" : "^ 0.6.2", "vue" : "^ 2.6.14", "vue - hot - reload - API" : "^ 2.2.4", "vue - HTML - loader" : "^ 1", "vue - loader" : "^ 13.5.0", "vue - the router" : "^ 3.0.1", "vue - style - loader" : "^ 3.0.3", "vue - the template - the compiler" : "^ 2.6.14 vuex", ""," ^ 3.0.1 ", "webpack" : "^ 3.9.1", "webpack - dev - server" : "^ 2.9.5"}Copy the code4. Download the dependency packages
npm install
Copy the code5. Create SRC and dist folders: SRC is the development directory where we will write our business code, dist is the directory where we will store js files after webPack
Add the webpack configuration and pack the contents of SRC into the dist directory: add the webpack.config.js file to the root directory
const path = require('path')
const webpack = require('webpack')
const uglify = require('uglifyjs-webpack-plugin')
module.exports = {
devtool: 'source-map'.entry: './src/index.js'.// the entry file is the index.js file in the SRC directory of the previous step,
output: {
path: path.resolve(__dirname, './dist'), // The output path is the dist directory created in the previous step.
publicPath: '/dist/'.filename: 'zwtCircleProgress.min.js'.// Output file corresponding to the main field in package.json
libraryTarget: 'umd'.umdNamedDefine: true,},module: {
rules: [{test: /\.vue$/,
loader: 'vue-loader'}, {test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader'},],}, {test: /\.js$/,
exclude:
/node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader'}, {test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
loader: 'url-loader'.query: {
limit: 30000.name: '[name].[ext]? [hash]',},},],},plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),},}),]}Copy the code7, package [need to modify the main file information pointed to by the main field in package.json]
npm run build
Copy the code8. Modify information about the main file pointed to by the main field
. "Main" : "dist/zwtCircleProgress. Min. Js" / / in the name of the master file for you correspondingCopy the code9. Create a. Npmignore file, which is used to ignore files published to the NPM
.*
*.yml
build
/ node_modules
/ src
/ test
Copy the code2: NPM operation
1. Register the NPM account (be sure to verify the email, otherwise the package cannot be sent later and 403 permissions will be reported)
2, Go to the root directory, run NPM login, enter your user name, password and email, if successful login, will display:
Logged in asYour name on HTTPS://registry.npmjs.org/.
Copy the code3, Run NPM publish to NPM official website
Note 1: Verify the mailbox
Note 2: The package name cannot be the same as the existing package name in the NPM library.
For NPM versioning, we have a version field in package.json. It allows us to tweak versions as the project is built
NPM has its own version control standard — Semantic Versioning
For “version”:” X.Y.Z”
01. Bug fixes, minor changes, add Z
02. Added new features, but still backward compatible, add y
03. There is a big change, not backward compatible, add X
Example: My original project was1.0. 0Version if1In, becomes1.01.if2In, becomes1.1. 0if3In, becomes2.0. 0
Copy the codeUse NPM version <update_type> to automatically change the version
The update_type parameters include patch, minor, and majorCopy the code