les-vue-chan v0.0.4

项目名称

les-vue-chan

简述

use vue2.0,draw the intersection (chan) for the traffic industry

如何使用

安装依赖包

npm install --save les-vue-chan

全局引入(后续更新模板加载)

import chan from "les-vue-chan"
Vue.use(chan)

模板引入

<template>
    <div>
      <les-chan :options="options" @on-chan="getChan"></les-chan>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: {
                    bgColor:'rgba(2,2,2,0)',//画布颜色
                    width: 400,
                    height: 400,
                    mode: 3,
                    fontScale: 0.25,
                    data: [
                        {
                            name:"彩虹路",
                            direction: 1,
                            angle:  -1.5707963267948966,
                            separationWidth: 2,
                            separationType: 3,
                            outLaneNum:3,
                        },
                        {
                            direction: 1,
                            separationWidth: 4,
                            separationType: 3,
                            angle: 0,
                            name:"紫霞路",
                            outLaneWidth: 3.5,
                            outLaneNum:3
                        },
                        {
                            name:"广州路",
                            direction: 2,
                            angle:  1.3089969389957472,
                            site: "200,0"
                        },
                        {
                            name:"一路向西",
                            direction: 2,
                            angle:  -3.141592653589793,
                            site: "200,0"
                        }
                    ]
                },
                chan: ""
            };
        },
        components:{
        },
        methods: {
            getChan(chan) {
                this.chan = chan;
                this.chan.init();
            }
        }
    };
</script>

>效果图

![渲染图](https://upload-images.jianshu.io/upload_images/1318449-f8ceef7278f83433.png?imageMogr2/auto-orient/strip|imageView2/2/w/520/format/webp "效果图")