🐆开始使用
tmui作者专为uniapp开发的一个轻量的canvas渲染库,有着优异的动画渲染能力
注意
这些功能将从3.1.03开始逐步完善,有些性质的功能可能会被随时移除。请注意说明。
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text label="这是tmui作者自编的一个轻量级渲染库,主要适用于uniapp一些营销的动画渲染.3.1.03首次发布"></tm-text>
<tm-text label="目前还未开放文档,请参考示例制作你想的交互营销动画."></tm-text>
</tm-sheet>
<tm-sheet :round="5" color="black" :padding="[0, 0]" :height="686">
<tm-render ref="dom" :width="686" :height="686"></tm-render>
</tm-sheet>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted, nextTick,onUnmounted } from "vue"
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmRender from "../../tmui/components/tm-render/tm-render.vue"
import tmText from "../../tmui/components/tm-text/tm-text.vue"
import { tmRoundRect } from "@/tmui/components/tm-render/tmCv/shape/roundRect";
import { tmRect } from "@/tmui/components/tm-render/tmCv/shape/rect";
import { tmTextColor } from "@/tmui/components/tm-render/tmCv/shape/textColor";
import { tmTextLabel } from "@/tmui/components/tm-render/tmCv/shape/text";
import { tmImages } from "@/tmui/components/tm-render/tmCv/shape/image";
import { tmCv } from "@/tmui/components/tm-render/tmCv"
let tmcv : tmCv | null = null;
const dom = ref<InstanceType<typeof tmRender> | null>(null)
onMounted(() => {
draw()
})
onUnmounted(()=>{
if(tmcv){
tmcv.destory()
}
})
async function draw() {
if (!dom.value) return;
tmcv = await dom.value.getTmCv()
if (!tmcv) return;
const text = new tmTextColor(tmcv, {
x: 110, fillStyle: 'red', y: 150,
text: [
{ text: '这是', color: 'white' },
{ text: '动画交互', color: 'yellow', fontSize: 24 },
{ text: '的库', color: 'white' },
],
textAlign: 'left'
})
const Logo = new tmImages(tmcv, {
x: (tmcv.opts.width-100)/2,
y: 30,
width: 100,
height: 100,
radius:[10,10,10,10],
strokeStyle:'white',
lineWidth:6
}, 'https://cdn.tmui.design/public/design/testImg.jpg')
const Logo2 = new tmImages(tmcv, {
x: (tmcv.opts.width-60)/2,
y: 300,
width: 60,
height: 60,
radius:[30,30,30,30],
strokeStyle:'white',
lineWidth:6
}, 'https://tmui.design/images/logoGreat.png')
const Line = new tmRect(tmcv,{x:0,fillStyle:'red',y:190,width:100,height:6})
const roundRect = new tmRoundRect(tmcv,{x:10,strokeStyle:'red',y:10,width:tmcv.opts.width-20,height:tmcv.opts.height-20,radius:[6,6,6,6]})
const textlabel = new tmTextLabel(tmcv, {
x: 8, fillStyle: 'red', y: 240,
text: "同名自定义",
textAlign: 'center',
fontSize:30
})
const Line2 = new tmRect(tmcv,{x:(tmcv.opts.width-100) /2,fillStyle:'red',y:280,width:100,height:3})
tmcv.add([Logo,Logo2,text,textlabel,Line,Line2,roundRect])
Logo.animate({ width: 110, height: 110 }, { yoyo: true, repeat: Infinity })
Line.animate({ x: tmcv.opts.width-100}, { yoyo: true, repeat: Infinity,duration:1200 })
textlabel.animate({fontSize:18}, { yoyo: true, repeat: Infinity,duration:1200 })
tmcv.draw();
}
</script>
<style></style>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ❌ | ✔️ | ✔️ | ✔️ |