使用vue绘制登录页_JavaScript库，用于使用Vue绘制复杂的画布图形

最新推荐文章于 2024-09-03 07:17:07 发布

cuk5340

最新推荐文章于 2024-09-03 07:17:07 发布

阅读量527

点赞数

文章标签： vue js react 数据可视化 java ViewUI

原文链接：https://vuejsexamples.com/javascript-library-for-drawing-complex-canvas-graphics-using-vue/

版权

Vue Konva是一个让Vue与Konva框架结合的JavaScript库，用于创建复杂的canvas图形。它提供声明性和响应式的绑定，使得Vue组件可以直接对应Konva的图形组件。主要图形包括矩形、圆形、椭圆等，还支持自定义形状。要开始使用，需要Vue.js 2.4+，可以通过npm安装或直接引用CDN。

摘要由CSDN通过智能技术生成

使用vue绘制登录页

Vue Konva (Vue Konva)

Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue.

Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。

It provides declarative and reactive bindings to the Konva Framework.

它提供了对Konva框架的声明性和React性绑定。

All vue-konva components correspond to Konva components of the same name with the prefix 'v-'. All the parameters available for Konva objects can add as config in the prop for corresponding vue-konva components.

所有vue-konva组件都对应于具有前缀“ v-”的同名Konva组件。可用于Konva对象的所有参数都可以在配置中作为对应的vue-konva组件的配置添加。

Core shapes are: v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-text-path, v-star, v-label, SVG Path, v-regular-polygon. Also you can create custom shape.

核心形状包括：v-rect，v-circle，v-ellipse，v-line，v-image，v-text，v-text-path，v-star，v-label，SVG Path，v-regular-polygon 。您也可以创建自定义形状。

View demo 查看演示 Download Source 下载源

快速开始 (Quick Start)

Vue.js version 2.4+ is required.

需要Vue.js 2.4+版本。

1通过npm安装 (1 Install via npm)

npm install vue-konva konva --save

2导入和使用VueKonva (2 Import and use VueKonva)

import Vue from 'vue';
import VueKonva from 'vue-konva'

Vue.use(VueKonva)

3组件模板中的参考 (3 Reference in your component templates)

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};

</script>

或使用CDN (Or use a CDN)

<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
  </head>
  <body>
    <div id='app'>
      <v-stage ref="stage" :config="configKonva">
        <v-layer ref="layer">
          <v-circle :config="configCircle"></v-circle>
        </v-layer>
      </v-stage>
    </div>
    <!--1. Link Vue Javascript & Konva-->
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.js'></script>
    <!--2. Link VueKonva Javascript (Plugin automatically installed)-->
    <script src='./lib/vue-konva.min.js'></script>
    <script>
      // 3. Create the Vue instance
      new Vue({
        el: '#app',
        data: {
          configKonva: {
            width: 200,
            height: 200
          },
          configCircle: {
            x: 100,
            y: 100,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4
          }
        }
      })
    </script>
  </body>
</html>