Создание библиотеки подключаемых модулей динамических компонентов Vue Canvas

JavaScript Vue.js Webpack Canvas ECMAScript 6

vue-canvas-effect

Коллекция анимаций Canvas Компоненты Vue



logo of vue-canvas-effect repository

🌾online demo| 📘English document

содержание

  • [浏览器兼容]
  • [安装]
  • [使用]
    • [ES6]
      • [按需加载]
      • [全部引入]
    • [普通模式]
  • [组件列表]
    • [neon]
    • [bubbles]
  • [修改日志]
  • [贡献]
  • [TKS]

Совместимость с браузером

IE
IE		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 iOS Safari
iOS		 Chrome for Android
Android
IE9+ ✓ ✓ ✓ ✓ ✓

Установить

NPM

npm install vue-canvas-effect --save

использовать

ES6

нагрузка по требованию

рекомендовать Сначала установите зависимость babel-plugin-import

npm install babel-plugin-import --save-dev

Затем измените файл .babelrc

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "vue-canvas-effect",
    "libraryDirectory": "src/components"
  }]]
}

Затем, если вам нужен неоновый компонент, отредактируйте main.js

import Vue from 'vue'
import {neon} from 'vue-canvas-effect';
Vue.component(neon.name, neon);
`or`
Vue.component('customName', neon);
new Vue({
  el: '#app',
  render: h => h(App)
})

импортировать все

Не рекомендуется

import Vue from 'vue'
import vueCanvas from 'vue-canvas-effect';
Vue.use(vueCanvas)
new Vue({
  el: '#app',
  render: h => h(App)
})

нормальный режим

тег скрипта

<html>
<head>
  ...
</head>
<body>
   <div id="app">
        <neon-effect></neon-effect>
   </div>
   <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
   <script src="../dist/neon.min.js"></script>
   <script>
      new Vue({
           el: '#app'
        })
   </script>
</body>
</html>

список компонентов

neon

name: neonEffect

// 默认标签名
<neon-effect :options="options"></neon-effect>

//default options
        {
          len: 20, //五边形的单边长度
          count: 50, //多少线重叠
          rate: 20, //速度 越小越快
          dieChance: 0.05, //单次绘画失败进行重绘的几率
          sparkChance: 0.1, //[0,1] 越大画出的五边形越多重
          sparkDist: 10, //闪烁点的距离
          sparkSize: 2,//闪烁点的大小
          contentLight: 60, // [0,100] 色块的亮度
          shadowToTimePropMult: 6, //五边形的内环阴影大小
          bgColorArr: [0, 0, 0] //背景色数组
        }

bubbles

name: bubblesEffect

// 默认标签名
<bubbles-effect :options="options"></bubbles-effect>

//default options
        {
          color: 'rgba(225,225,225,0.5)', //气泡颜色
          radius: 15, //气泡半径
          densety: 0.3, // 气泡密度 越大越密集(建议不要大于1)
          clearOffset: 0.2 // 气泡消失距离[0-1] 越大越晚消失
        }

журнал изменений

See the GitHub Посмотреть исторические версии.

способствовать

Добро пожаловать, чтобы дать некоторые комментарии и оптимизацию, с нетерпением жду вашегоPull Request.

Способ реализации относительно прост: заинтересованные друзья могут работать вместе, чтобы улучшить этот проект, чтобы сделать анимацию холста более эффективной в Vue.

адрес проектаvue-canvas-effect

TKS

circleMagic

Категории