You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
4.2 KiB
165 lines
4.2 KiB
<template>
|
|
<view></view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
import SVG from 'com.caverock.androidsvg.SVG';
|
|
import ImageView from 'android.widget.ImageView';
|
|
import PictureDrawable from 'android.graphics.drawable.PictureDrawable';
|
|
|
|
import { ButtonClickListener, createColoredBitmap, setSvgImage } from './utils'
|
|
//原生提供以下属性或方法的实现
|
|
export default {
|
|
/**
|
|
* 组件名称，也就是开发者使用的标签
|
|
*/
|
|
name: "l-svg-x",
|
|
/**
|
|
* 组件涉及的事件声明，只有声明过的事件，才能被正常发送
|
|
*/
|
|
emits: ['load', 'error', 'click'],
|
|
/**
|
|
* 属性声明，组件的使用者会传递这些属性值到组件
|
|
*/
|
|
props: {
|
|
"src": {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
"color": {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
},
|
|
/**
|
|
* 组件内部变量声明
|
|
*/
|
|
data() {
|
|
return {
|
|
svg: null as SVG | null,
|
|
timer: -1
|
|
}
|
|
},
|
|
/**
|
|
* 属性变化监听器实现
|
|
*/
|
|
watch: {
|
|
"src": {
|
|
handler(_ : string) {
|
|
if (this.src == '') return
|
|
setTimeout(() => {
|
|
this.update(true)
|
|
}, 0)
|
|
|
|
},
|
|
immediate: true
|
|
},
|
|
"color": {
|
|
handler(_ : string) {
|
|
if (this.color == '') return
|
|
setTimeout(() => {
|
|
this.update(false)
|
|
}, 0)
|
|
},
|
|
immediate: true
|
|
},
|
|
},
|
|
/**
|
|
* 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
|
|
* ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
|
|
*/
|
|
expose: ['setCSS'],
|
|
methods: {
|
|
setSvg() {
|
|
clearTimeout(this.timer)
|
|
this.timer = setTimeout(()=> {
|
|
const drawable = new PictureDrawable(this.svg!.renderToPicture())
|
|
if ([null, ''].includes(this.color)) {
|
|
this.$el?.setImageDrawable(drawable)
|
|
} else {
|
|
const newBM = createColoredBitmap(drawable, this.color)
|
|
if(newBM == null) return
|
|
this.$el?.setImageBitmap(newBM)
|
|
}
|
|
},20)
|
|
},
|
|
update(init : boolean) {
|
|
if(this.svg == null) {
|
|
setSvgImage(this.src, (svg) => {
|
|
if(svg != null) {
|
|
this.svg = svg
|
|
this.setSvg()
|
|
if(init) {
|
|
//svg.getDocumentWidth()
|
|
const detail = new ImageLoadEventDetail( svg.getDocumentViewBox().width(), svg.getDocumentViewBox().height())
|
|
const loadEvent = new UniImageLoadEvent('load', detail)
|
|
this.$emit('load', loadEvent)
|
|
}
|
|
return
|
|
}
|
|
this.$emit('error')
|
|
})
|
|
} else {
|
|
// this.setSvg()
|
|
}
|
|
|
|
},
|
|
setCSS(css : string) {
|
|
// this.$el?.setCSS(css)
|
|
}
|
|
},
|
|
/**
|
|
* [可选实现] 组件被创建，组件第一个生命周期，
|
|
* 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
|
|
*/
|
|
created() {},
|
|
/**
|
|
* [可选实现] 对应平台的view载体即将被创建，对应前端beforeMount
|
|
*/
|
|
NVBeforeLoad() {},
|
|
/**
|
|
* [必须实现] 创建原生View，必须定义返回值类型
|
|
* 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
|
|
* （Android需要明确知道View类型，需特殊校验）
|
|
*/
|
|
NVLoad() : ImageView {
|
|
let ImageView = new ImageView(this.$androidContext)
|
|
ImageView.setOnClickListener(new ButtonClickListener(this));
|
|
return ImageView
|
|
},
|
|
/**
|
|
* [可选实现] 原生View已创建
|
|
*/
|
|
NVLoaded() {},
|
|
/**
|
|
* [可选实现] 原生View布局完成
|
|
*/
|
|
NVLayouted() {},
|
|
/**
|
|
* [可选实现] 原生View将释放
|
|
*/
|
|
NVBeforeUnload() {},
|
|
/**
|
|
* [可选实现] 原生View已释放，这里可以做释放View之后的操作
|
|
*/
|
|
NVUnloaded() {},
|
|
/**
|
|
* [可选实现] 组件销毁
|
|
*/
|
|
unmounted() {},
|
|
/**
|
|
* [可选实现] 自定组件布局尺寸，用于告诉排版系统，组件自身需要的宽高
|
|
* 一般情况下，组件的宽高应该是由终端系统的排版引擎决定，组件开发者不需要实现此函数
|
|
* 但是部分场景下，组件开发者需要自己维护宽高，则需要开发者重写此函数
|
|
*/
|
|
NVMeasure(size : UTSSize) : UTSSize {
|
|
// size.width = 512.0.toFloat();
|
|
// size.height = 512.0.toFloat();
|
|
return size;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|