Light

zyszys / vue-canvas-nest Goto Github PK

View Code? Open in Web Editor NEW

165.0 2.0 20.0 1.17 MB

:dizzy: A Vue.js background component for canvas-nest.

Home Page: http://zyszys.github.io/vue-canvas-nest/

License: MIT License

Vue 41.67% JavaScript 37.26% HTML 21.07%

canvas canvas-nest vue-components nest html5-canvas particles

vue-canvas-nest's Introduction

vue-canvas-nest

A Vue.js component for canvas-nest.

Install

# install dependencies
npm i vue-canvas-nest

# or use yarn
yarn add vue-canvas-nest

Usage

Registe component

import vueCanvasNest from 'vue-canvas-nest'
export default {
    components: { vueCanvasNest }
}

How to use

Simply use

<vue-canvas-nest></vue-canvas-nest>

With config or el(area render)

<vue-canvas-nest :config="{color:'255,0,0', count: 88}" :el="'#area'"></vue-canvas-nest>

Config

color: the canvas line color, default: '255,0,0'; the color is (R,G,B).
opacity: the opacity of line (0~1), default: 0.7.
count: the number of lines, default: 99.
zIndex: the index of z space, default: -1.

Note: Render the whole page if no el passed by default.

Example:

const config = {
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};

Contributors

ZYSzys

Thanks

canvas-nest.js

License

MIT.

vue-canvas-nest's People

Contributors

Stargazers

Watchers

vue-canvas-nest's Issues

加个防抖机制就完美了

线条抖动有点厉害，如果加个防抖参数能控制线条抖动就好了。

为啥我打开无法显示呢

@ZYSzys

支持nuxt.js 服务端渲染吗？

里面应该用了Window 对象，然后就是报错未定义

路由切换时抛错

我登陆页面使用了 vue-canvas-nest
登陆成功后前端路由跳转, 抛错如下

vue.esm.js?efeb:1741 TypeError: Cannot read property 'defaultView' of null
    at Sensor.destroy (Sensor.js?7005:83)
    at removeSensor (sensorPool.js?0732:63)
    at clear (index.js?272b:39)
    at CanvasNest.destroy (CanvasNest.js?dbdb:157)
    at VueComponent.beforeDestroy (VueCanvasNest.vue?29d0:31)
    at callHook (vue.esm.js?efeb:2921)
    at VueComponent.Vue.$destroy (vue.esm.js?efeb:2700)
    at destroy (vue.esm.js?efeb:4178)
    at invokeDestroyHook (vue.esm.js?efeb:5743)
    at invokeDestroyHook (vue.esm.js?efeb:5748)

dependencies

vue 应该放到 peer dependencies 会比较合理一些！

可以为typescript添加一个声明文件

强迫症看着很难受。

在vue3中不可用

vueCanvasNest.vue:1 Uncaught (in promise)
TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.o (vueCanvasNest.vue:1:66)

关于设置position: fixed后，向下滚动，焦点不跟随问题

我在vue2.7.14项目中使用时，使用<vue-canvas-nest :config="config" style="position: fixed;width: 100%;height: 100%;"></vue-canvas-nest>，当页面在最上方时，焦点在鼠所指处，但是当向下滚动页面时，焦点将会在下方，而不是鼠标所指处

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

if i add 'el', then occurs error:

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

在特定的区域显示时，鼠标位置不会在特定的位置

为什么我按照教程中的引入了之后没有生效

import vueCanvasNest from 'vue-canvas-nest' ;
components: { vueCanvasNest },
在data中定义了配置对象
data() {
return {
vueCanvasNestConfig: {
zIndex: 2
}
}
}
再调用时候传入进去

在页面中已经有了这个元素但是我的配置对象并没有生效

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

chore(deps): update dependency vue-router to v3.6.5
chore(deps): update dependency babel-loader to v9
chore(deps): update dependency css-loader to v7
chore(deps): update dependency vue-loader to v17
chore(deps): update dependency vue-router to v4
🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update dependency vue-loader to v13.7.3
chore(deps): update dependency vue-template-compiler to v2.7.16
chore(deps): update dependency file-loader to v6
chore(deps): update dependency html-webpack-plugin to v5
chore(deps): update dependency vue to v3
chore(deps): update dependency webpack to v5
Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

canvas-nest.js 2.0.3

babel-core 6.26.3

babel-loader 7.1.5

babel-preset-env 1.7.0

babel-preset-stage-3 6.24.1

cross-env 5.2.0

css-loader 0.28.11

file-loader 1.1.11

html-webpack-plugin 3.2.0

vue-loader 13.7.2

vue-router 3.0.1

vue-template-compiler 2.5.17

webpack 3.12.0

webpack-dev-server 2.11.5

vue ^2.5.x

travis

.travis.yml

node 10

Check this box to trigger a request for Renovate to run again on this repository

动态设置config为什么canvas还是未更新呢？

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

zyszys / vue-canvas-nest Goto Github PK

vue-canvas-nest's Introduction

vue-canvas-nest

Install

Usage

Registe component

How to use

Simply use

With config or el(area render)

Config

Example:

Contributors

Thanks

License

vue-canvas-nest's People

Contributors

Stargazers

Watchers

Forkers

vue-canvas-nest's Issues

Rate-Limited

Edited/Blocked

Open

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org