icarrear / vue-easy-canvas Goto Github PK

View Code? Open in Web Editor NEW

A canvas lib helps us easy to layout with canvas. 使用render函数在canvas中创建文档流布局，支持web、小程序等支持canvas的平台。Tag: 海报图、朋友圈分享

JavaScript 6.10% HTML 4.64% Vue 89.26%

vue-easy-canvas's Introduction

vue-easy-canvas

将 easy-canvas 封装成vue组件进行使用 注意：内部实现是将vue节点转换成目标节点，转换过程中会有性能损失，渲染与转换时间大概4:1

相关库 easy-canvas

Installation

npm install vue-easy-canvas --save

Usage

import easyCanvas from 'vue-easy-canvas'
Vue.use(easyCanvas)

<ec-canvas :width="300" :height="600">
    <ec-scroll-view :styles="{height:600}">

    <ec-view :styles="styles.imageWrapper">
        <ec-image src="https://tse1-mm.cn.bing.net/th/id/OIP.Dkj8fnK1SsPHIBmAN9XnUAHaNK?pid=Api&rs=1" :styles="styles.image" mode="aspectFill"></ec-image>
        <ec-view :styles="styles.homeTitleWrapper">
        <ec-text>easyCanvas</ec-text>
        </ec-view>
    </ec-view>

    <ec-view :styles="styles.itemWrapper"
        v-for="(item,index) in examples"
        :key="index"
        :on="{
        click(e){
            window.location.href = host + item.url
        }
        }">
        <ec-view :styles="styles.title">
        <ec-text>{{item.title}}</ec-text>
        </ec-view>
        <ec-view :styles="styles.desc">
        <ec-text>{{item.desc}}</ec-text>
        </ec-view>
    </ec-view>

    </ec-scroll-view>
</ec-canvas>

Recommend Projects