第一次提交
This commit is contained in:
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
unpackage
|
||||
/unpackage
|
||||
/.DS_Store
|
||||
.DS_Store
|
||||
node_modules
|
||||
/node_modules
|
||||
/.vuepress/dist
|
||||
20
.hbuilderx/launch.json
Normal file
20
.hbuilderx/launch.json
Normal file
@ -0,0 +1,20 @@
|
||||
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"app-plus" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"default" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"h5" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
}
|
||||
]
|
||||
}
|
||||
41
App.vue
Normal file
41
App.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 40 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
//App2.6.5+ 仅iOS
|
||||
// #ifndef APP-PLUS || H5
|
||||
if (uni.canIUse('getUpdateManager')) {
|
||||
const updateManager = uni.getUpdateManager();
|
||||
updateManager.onCheckForUpdate((res) => {
|
||||
if (res.hasUpdate) {
|
||||
updateManager.onUpdateReady(() => {
|
||||
this.fui.modal('更新提示', '发现新版本，为了获得更好的体验，建议立即更新', (res) => {
|
||||
updateManager.applyUpdate();
|
||||
});
|
||||
});
|
||||
updateManager.onUpdateFailed(() => {
|
||||
this.fui.modal('更新失败', '新版本更新失败，请稍后再试或删除小程序重新搜索打开',
|
||||
(res) => {});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onShow: function() {
|
||||
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
@import './common/fui-app.css';
|
||||
@import './components/firstui/fui-theme/fui-theme.css';
|
||||
/*自定义字体css */
|
||||
@import './static/icon/fui-custom-icon.css';
|
||||
</style>
|
||||
134
common/fui-app.css
Normal file
134
common/fui-app.css
Normal file
@ -0,0 +1,134 @@
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
background-color: var(--fui-bg-color-grey,#F1F4FA);
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: var(--fui-color-title,#181818);
|
||||
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.fui-page__hd {
|
||||
width: 100%;
|
||||
padding: 52rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
|
||||
.fui-page__title {
|
||||
text-align: left;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fui-page__desc {
|
||||
margin-top: 8rpx;
|
||||
color: #B2B2B2;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.fui-page__spacing {
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 32rpx;
|
||||
padding-left: 16rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-section__title:not(:first-child) {
|
||||
margin-top: 96rpx;
|
||||
}
|
||||
|
||||
.fui-page__title image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-left: 16rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-section__title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #465CFF;
|
||||
border-radius: 2px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.fui-color__primary{
|
||||
color: #465CFF;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
color: transparent !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/*Flex布局*/
|
||||
.fui-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fui-flex__1 {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
.fui-flex__column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-flex__center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-flex__between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fui-flex__reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.fui-align__center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
54
common/fui-app.js
Normal file
54
common/fui-app.js
Normal file
@ -0,0 +1,54 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 4072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const fui = {
|
||||
toast: function(text) {
|
||||
text && uni.showToast({
|
||||
title: text,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
modal: function(title, content, callback, showCancel, confirmColor, confirmText) {
|
||||
uni.showModal({
|
||||
title: title,
|
||||
content: content,
|
||||
showCancel: showCancel || false,
|
||||
// #ifndef MP-TOUTIAO
|
||||
cancelColor: "#7F7F7F",
|
||||
confirmColor: confirmColor || "#465CFF",
|
||||
// #endif
|
||||
confirmText: confirmText || "确定",
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
callback && callback(true)
|
||||
} else {
|
||||
callback && callback(false)
|
||||
}
|
||||
},
|
||||
fail(err){
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
href(url, isMain) {
|
||||
if (isMain) {
|
||||
uni.switchTab({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
}
|
||||
},
|
||||
jsonp: function(url, callback, callbackname) {
|
||||
// #ifdef H5
|
||||
window[callbackname] = callback;
|
||||
let script = document.createElement("script");
|
||||
script.src = url;
|
||||
script.type = "text/javascript";
|
||||
document.head.appendChild(script);
|
||||
document.head.removeChild(script);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
export default fui
|
||||
30
common/fui-request.js
Normal file
30
common/fui-request.js
Normal file
@ -0,0 +1,30 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 14 0725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import http from '@/components/firstui/fui-request'
|
||||
|
||||
//初始化请求配置项
|
||||
http.create({
|
||||
host: 'https://ffa.firstui.cn',
|
||||
header: {
|
||||
// 'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
//请求拦截
|
||||
http.interceptors.request.use(config => {
|
||||
//请求之前可在请求头中加入token等信息
|
||||
let token = uni.getStorageSync('firstui_token') || 'testToken';
|
||||
if (config.header) {
|
||||
config.header['token'] = token
|
||||
} else {
|
||||
config.header = {
|
||||
'token': token
|
||||
}
|
||||
}
|
||||
return config
|
||||
})
|
||||
//响应拦截
|
||||
http.interceptors.response.use(response => {
|
||||
//TODO
|
||||
return response
|
||||
})
|
||||
|
||||
export default http
|
||||
437
components/firstui/fui-actionsheet/fui-actionsheet.vue
Normal file
437
components/firstui/fui-actionsheet/fui-actionsheet.vue
Normal file
@ -0,0 +1,437 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 140 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view @touchmove.stop.prevent="stop" v-if="isShow || !isNvue">
|
||||
<view class="fui-actionsheet__mask" :class="{'fui-actionsheet__mask-show':show}" ref="fui_asm_ani"
|
||||
@tap="handleClickMask" :style="getStyle"></view>
|
||||
<view class="fui-actionsheet__wrap"
|
||||
:class="{'fui-actionsheet__show':show,'fui-actionsheet__radius':radius,'fui-as__bg-light':theme==='light','fui-as__bg-dark':theme==='dark'}"
|
||||
ref="fui_as_ani" :style="{zIndex:zIndex}">
|
||||
<text class="fui-actionsheet__tips"
|
||||
:class="{'fui-actionsheet__radius':radius,'fui-as__btn-light':theme==='light','fui-as__btn-dark':theme==='dark'}"
|
||||
:style="{fontSize:size+'rpx',color:color}" v-if="tips">{{tips}}</text>
|
||||
<view :class="{'fui-actionsheet__operate-box':isCancel}">
|
||||
<text class="fui-actionsheet__btn"
|
||||
:style="{color:theme==='dark'?(item.darkColor || '#D1D1D1'):(item.color || '#181818'),fontSize:itemSize+'rpx'}"
|
||||
:class="{'fui-actionsheet__btn-last':!isCancel && index==vals.length-1,'fui-as__safe-weex':!isCancel && index==vals.length-1 && iphoneX && safeArea,'fui-actionsheet__radius':radius && !tips && index===0,'fui-as__divider-light':(index!==0 || tips) && theme==='light','fui-as__divider-dark':(index!==0 || tips) && theme==='dark' ,'fui-as__btn-light':theme==='light','fui-as__btn-dark':theme==='dark'}"
|
||||
v-for="(item,index) in vals" :key="index" @tap="handleClickItem(index)">{{item.text}}</text>
|
||||
</view>
|
||||
<text :style="{color:theme==='dark'?'#D1D1D1':'#181818',fontSize:itemSize+'rpx'}"
|
||||
class="fui-actionsheet__btn fui-actionsheet__cancel"
|
||||
:class="{'fui-as__safe-weex':iphoneX && safeArea,'fui-as__btn-light':theme==='light','fui-as__btn-dark':theme==='dark'}"
|
||||
v-if="isCancel" @tap="handleClickCancel">取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
export default {
|
||||
name: "fui-actionsheet",
|
||||
emits: ['click', 'cancel'],
|
||||
props: {
|
||||
//是否显示操作菜单
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//菜单按钮数组，可自定义文本颜色
|
||||
itemList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
//菜单按钮字体大小 rpx
|
||||
itemSize: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
//提示信息
|
||||
tips: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//提示信息文本颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: "#7F7F7F"
|
||||
},
|
||||
//提示文字大小 rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
//是否需要圆角
|
||||
radius: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否需要取消按钮
|
||||
isCancel: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//light/dark
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
},
|
||||
//点击遮罩 是否可关闭
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 996
|
||||
},
|
||||
//是否适配底部安全区
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false;
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true;
|
||||
// #endif
|
||||
return {
|
||||
iphoneX: false,
|
||||
vals: [],
|
||||
isNvue: isNvue,
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStyle() {
|
||||
return `z-index:${Number(this.zIndex)-10};`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// #ifdef APP-NVUE
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
itemList(newVal) {
|
||||
this.initData(newVal)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifdef APP-NVUE || MP-TOUTIAO
|
||||
this.iphoneX = this.isPhoneX();
|
||||
// #endif
|
||||
this.initData(this.itemList)
|
||||
},
|
||||
methods: {
|
||||
initData(vals) {
|
||||
if (vals && vals.length > 0) {
|
||||
if (typeof vals[0] !== 'object') {
|
||||
vals = vals.map(item => {
|
||||
return {
|
||||
text: item
|
||||
}
|
||||
})
|
||||
}
|
||||
this.vals = vals;
|
||||
}
|
||||
},
|
||||
handleClickMask() {
|
||||
if (!this.maskClosable) return;
|
||||
this.handleClickCancel();
|
||||
},
|
||||
handleClickItem(index) {
|
||||
if (!this.show) return;
|
||||
this.$emit('click', {
|
||||
index: index,
|
||||
...this.vals[index]
|
||||
});
|
||||
},
|
||||
handleClickCancel() {
|
||||
this.$emit('cancel');
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
open() {
|
||||
this.isShow = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation(true);
|
||||
}, 50);
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this._animation(false);
|
||||
},
|
||||
_animation(type) {
|
||||
if (!this.$refs['fui_asm_ani'] || !this.$refs['fui_as_ani']) return;
|
||||
let styles = {
|
||||
transform: `translateY(${type ? '0' : '100%'})`
|
||||
}
|
||||
animation.transition(
|
||||
this.$refs['fui_asm_ani'].ref, {
|
||||
styles: {
|
||||
opacity: type ? 1 : 0
|
||||
},
|
||||
duration: 250,
|
||||
timingFunction: 'ease-in-out',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
},
|
||||
() => {}
|
||||
);
|
||||
animation.transition(
|
||||
this.$refs['fui_as_ani'].ref, {
|
||||
styles,
|
||||
duration: 250,
|
||||
timingFunction: 'ease-in-out',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
},
|
||||
() => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE || MP-TOUTIAO
|
||||
isPhoneX() {
|
||||
if (!this.safeArea) return false;
|
||||
//34px
|
||||
const res = uni.getSystemInfoSync();
|
||||
let iphonex = false;
|
||||
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
|
||||
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
|
||||
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
|
||||
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
|
||||
'iphone15pro', 'iphone15promax'
|
||||
]
|
||||
const model = res.model.replace(/\s/g, "").toLowerCase()
|
||||
const newModel = model.split('<')[0]
|
||||
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
|
||||
.bottom > 0)) {
|
||||
iphonex = true;
|
||||
}
|
||||
return iphonex;
|
||||
},
|
||||
// #endif
|
||||
stop() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-actionsheet__wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
min-height: 100rpx;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all 0.25s ease-in-out;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: translateY(100%);
|
||||
/* #endif */
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.fui-as__bg-light {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.fui-as__bg-dark {
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
.fui-actionsheet__radius {
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-actionsheet__show {
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-actionsheet__tips {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
padding: 40rpx 60rpx;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-as__btn-light {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-as__btn-dark {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.fui-actionsheet__operate-box {
|
||||
padding-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.fui-actionsheet__btn {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
/* #endif */
|
||||
height: 100rpx;
|
||||
/* #ifdef APP-NVUE */
|
||||
line-height: 100rpx;
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
/* font-size: 32rpx; */
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-actionsheet__btn:active {
|
||||
/* #ifdef APP-NVUE */
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-actionsheet__btn-last {
|
||||
/* #ifndef APP-NVUE || MP-TOUTIAO */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-as__divider-light {
|
||||
border-top-width: 0.5px;
|
||||
border-top-style: solid;
|
||||
border-top-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.fui-as__divider-dark {
|
||||
border-top-width: 0.5px;
|
||||
border-top-style: solid;
|
||||
border-top-color: #333;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
|
||||
.fui-as__divider-light::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid var(--fui-color-border, #EEEEEE);
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fui-as__divider-dark::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #333;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-actionsheet__cancel {
|
||||
/* #ifndef APP-NVUE */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE || MP-TOUTIAO */
|
||||
.fui-as__safe-weex {
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 168rpx;
|
||||
/* #endif */
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-actionsheet__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
background-color: var(--fui-bg-color-mask, rgba(0, 0, 0, 0.6));
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-actionsheet__mask-show {
|
||||
/* #ifndef APP-NVUE */
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
244
components/firstui/fui-alert/fui-alert.vue
Normal file
244
components/firstui/fui-alert/fui-alert.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 4072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-alert__wrap" :class="[background?'':('fui-alert__'+type)]"
|
||||
:style="{background:background || getColor(type),borderRadius:radius,paddingTop:padding[0] || 0,paddingRight:padding[1]||0,paddingBottom:padding[2] || padding[0]||0,paddingLeft:padding[3] || padding[1]||0,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}">
|
||||
<view class="fui-alert__shrink" @tap.stop="leftClick">
|
||||
<slot></slot>
|
||||
<icon :type="type" :size="iconSize" :color="iconColor" v-if="!isLeft && type && type!=='true'"></icon>
|
||||
</view>
|
||||
<view class="fui-alert__content"
|
||||
:class="{'fui-text__p-left':(!isLeft && type && type!=='true') || (spacing && isLeft),'fui-text__p-right':closable}"
|
||||
@tap.stop="onClick">
|
||||
<text class="fui-alert__text" :style="{fontSize:size,color:color}" v-if="title">{{title}}</text>
|
||||
<text class="fui-alert__text fui-desc__padding" :class="{'fui-alert__single':single}"
|
||||
:style="{fontSize:descSize,color:descColor}" v-if="desc">{{desc}}</text>
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<view class="fui-alert__shrink">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
<view :class="{'fui-alert__icon-close':desc}" v-if="closable">
|
||||
<icon @tap.stop="close" type="cancel" :size="closeSize" :color="closeColor"></icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-alert",
|
||||
emits: ['leftClick', 'click', 'close'],
|
||||
props: {
|
||||
//info, success, warn, waiting,clear
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//背景色，如果设置type对应颜色失效
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//padding值：[上，右，下，左]
|
||||
padding: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['20rpx', '32rpx']
|
||||
}
|
||||
},
|
||||
//margin-top值，单位rpx
|
||||
marginTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//margin-bottom值，单位rpx
|
||||
marginBottom: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//圆角
|
||||
radius: {
|
||||
type: String,
|
||||
default: '16rpx'
|
||||
},
|
||||
//icon颜色
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//icon字体大小，px
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 22
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closeColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//关闭icon字体大小，px
|
||||
closeSize: {
|
||||
type: Number,
|
||||
default: 22
|
||||
},
|
||||
//是否自定义左侧内容,默认图标失效
|
||||
isLeft: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//内容是否与图标之间有间隔，isLeft为true时生效
|
||||
spacing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '14px'
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
descColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
descSize: {
|
||||
type: String,
|
||||
default: '12px'
|
||||
},
|
||||
//描述文字单行展示，超出隐藏
|
||||
single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getColor(type) {
|
||||
const app = uni && uni.$fui && uni.$fui.color
|
||||
const color = (app && app.primary) || "#465CFF"
|
||||
const colors = {
|
||||
'success': (app && app.success) || '#09BE4F',
|
||||
'warn': (app && app.warning) || '#FFB703',
|
||||
'clear': (app && app.danger) || '#FF2B2B'
|
||||
}
|
||||
return colors[type] ? colors[type] : color;
|
||||
},
|
||||
leftClick() {
|
||||
this.$emit('leftClick', {})
|
||||
},
|
||||
onClick() {
|
||||
this.$emit('click', {})
|
||||
},
|
||||
close() {
|
||||
this.$emit('close', {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-alert__wrap {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-alert__info,
|
||||
.fui-alert__waiting {
|
||||
background-color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
.fui-alert__success {
|
||||
background-color: var(--fui-color-success, #09BE4F) !important;
|
||||
}
|
||||
|
||||
.fui-alert__warn {
|
||||
background-color: var(--fui-color-warning, #FFB703) !important;
|
||||
}
|
||||
|
||||
.fui-alert__clear {
|
||||
background-color: var(--fui-color-danger, #FF2B2B) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-alert__shrink {
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-alert__content {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-alert__text {
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-all;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-desc__padding {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.fui-text__p-left {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.fui-text__p-right {
|
||||
padding-right: 60rpx;
|
||||
}
|
||||
|
||||
.fui-alert__single {
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fui-alert__icon-close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 16rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
218
components/firstui/fui-animation/fui-animation.vue
Normal file
218
components/firstui/fui-animation/fui-animation.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 14 0 7 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-popup__animation" :class="[ani.in]" :style="'transform:' + transform + ';' + stylesObject"
|
||||
@tap="change" v-if="isShow" ref="fui_ani">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
name: 'fui-animation',
|
||||
emits: ['click', 'change'],
|
||||
props: {
|
||||
//是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/*
|
||||
过渡动画类型
|
||||
['fade,'slide-top','slide-right','slide-bottom','slide-left','zoom-in','zoom-out']
|
||||
*/
|
||||
animationType: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
//styles 组件样式，同 css 样式
|
||||
styles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
ani: {
|
||||
in: '',
|
||||
active: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stylesObject() {
|
||||
//默认值
|
||||
const defStyles = {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
// #ifndef APP-NVUE
|
||||
display: 'flex',
|
||||
// #endif
|
||||
'justify-content': 'center',
|
||||
'align-items': 'center'
|
||||
};
|
||||
const mergeStyles = Object.assign({}, defStyles, this.styles);
|
||||
const styles = {
|
||||
...mergeStyles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
};
|
||||
let transfrom = '';
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i);
|
||||
transfrom += line + ':' + styles[i] + ';';
|
||||
}
|
||||
return transfrom;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
});
|
||||
},
|
||||
open() {
|
||||
clearTimeout(this.timer);
|
||||
this.isShow = true;
|
||||
this.transform = '';
|
||||
this.ani.in = '';
|
||||
for (let i in this.getTranfrom(false)) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = 'fui-popup__fade-out';
|
||||
} else {
|
||||
this.transform += `${this.getTranfrom(false)[i]} `;
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation(true);
|
||||
}, 50);
|
||||
});
|
||||
},
|
||||
close(type) {
|
||||
clearTimeout(this.timer);
|
||||
this._animation(false);
|
||||
},
|
||||
_animation(type) {
|
||||
let styles = this.getTranfrom(type);
|
||||
// #ifdef APP-NVUE
|
||||
if (!this.$refs['fui_ani']) return;
|
||||
animation.transition(
|
||||
this.$refs['fui_ani'].ref, {
|
||||
styles,
|
||||
duration: this.duration, //ms
|
||||
timingFunction: 'ease',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
},
|
||||
() => {
|
||||
if (!type) {
|
||||
this.isShow = false;
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
});
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.transform = '';
|
||||
for (let i in styles) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = `fui-popup__fade-${type ? 'in' : 'out'}`;
|
||||
} else {
|
||||
this.transform += `${styles[i]} `;
|
||||
}
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
if (!type) {
|
||||
this.isShow = false;
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
});
|
||||
}, this.duration);
|
||||
// #endif
|
||||
},
|
||||
getTranfrom(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
};
|
||||
this.animationType.forEach(mode => {
|
||||
switch (mode) {
|
||||
case 'fade':
|
||||
styles.opacity = type ? 1 : 0;
|
||||
break;
|
||||
case 'slide-top':
|
||||
styles.transform += `translateY(${type ? '0' : '-100%'}) `;
|
||||
break;
|
||||
case 'slide-right':
|
||||
styles.transform += `translateX(${type ? '0' : '100%'}) `;
|
||||
break;
|
||||
case 'slide-bottom':
|
||||
styles.transform += `translateY(${type ? '0' : '100%'}) `;
|
||||
break;
|
||||
case 'slide-left':
|
||||
styles.transform += `translateX(${type ? '0' : '-100%'}) `;
|
||||
break;
|
||||
case 'zoom-in':
|
||||
styles.transform += `scale(${type ? 1 : 0.8}) `;
|
||||
break;
|
||||
case 'zoom-out':
|
||||
styles.transform += `scale(${type ? 1 : 1.2}) `;
|
||||
break;
|
||||
}
|
||||
});
|
||||
return styles;
|
||||
},
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-popup__animation {
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: transform, opacity;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.fui-popup__fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fui-popup__fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
351
components/firstui/fui-autograph/fui-autograph.vue
Normal file
351
components/firstui/fui-autograph/fui-autograph.vue
Normal file
@ -0,0 +1,351 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-autograph__wrap" :style="{ width: w + 'px', height:h + 'px',background:background }"
|
||||
ref="fui_gcanvas_ag">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<gcanvas @touchstart="onTouchstart" @touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
|
||||
:ref="canvasId" :style="{ width: w + 'px', height:h + 'px' }">
|
||||
</gcanvas>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-NVUE || MP-TOUTIAO || MP-QQ-->
|
||||
<canvas :disable-scroll="!completed" :canvas-id="canvasId" :id="canvasId" @touchstart="onTouchstart"
|
||||
@touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
|
||||
:style="{width:w+'px',height:h+'px'}" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup"
|
||||
@mouseleave="mouseleave"></canvas>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-QQ -->
|
||||
<canvas :disable-scroll="!completed" canvas-id="canvas_autograph" @touchstart="onTouchstart"
|
||||
@touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
|
||||
:style="{width:w+'px',height:h+'px'}"></canvas>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-TOUTIAO -->
|
||||
<canvas :disable-scroll="!completed" :canvas-id="canvasId" :id="canvasId" @touchstart="onTouchstart"
|
||||
@touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
|
||||
:style="{width:w+'px',height:h+'px'}" v-if="canvasId"></canvas>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
import {
|
||||
enable,
|
||||
WeexBridge
|
||||
} from './gcanvas/index.js';
|
||||
const dom = weex.requireModule('dom')
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
const canvasId = `fui_ag_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
// #endif
|
||||
export default {
|
||||
name: "fui-autograph",
|
||||
emits: ['ready'],
|
||||
props: {
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
//px
|
||||
lineWidth: {
|
||||
type: [Number, String],
|
||||
default: 5
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
default: '请签名！'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
width(val) {
|
||||
if (val) {
|
||||
this.w = uni.upx2px(Number(val))
|
||||
}
|
||||
},
|
||||
height(val) {
|
||||
if (val) {
|
||||
this.h = uni.upx2px(Number(val))
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// #ifndef MP-WEIXIN || MP-QQ
|
||||
const canvasId = `fui_ag_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
// #endif
|
||||
// #ifdef MP-QQ
|
||||
const canvasId = 'canvas_autograph'
|
||||
// #endif
|
||||
return {
|
||||
// #ifdef APP-NVUE
|
||||
isAndroid: true,
|
||||
nTop: 0,
|
||||
nLeft: 0,
|
||||
// #endif
|
||||
canvasId: canvasId,
|
||||
w: 300,
|
||||
h: 200,
|
||||
completed: false,
|
||||
autograph: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
let sys = uni.getSystemInfoSync()
|
||||
// #ifdef APP-NVUE
|
||||
this.isAndroid = sys.platform.toLocaleLowerCase() === "android";
|
||||
// #endif
|
||||
this.w = this.width == 0 ? sys.windowWidth : uni.upx2px(Number(this.width));
|
||||
this.h = uni.upx2px(Number(this.height) || 400)
|
||||
this.ctx = null;
|
||||
this.touchs = null;
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// #ifdef APP-NVUE
|
||||
let ganvas = this.$refs[this.canvasId];
|
||||
/*通过元素引用获取canvas对象*/
|
||||
let canvasObj = enable(ganvas, {
|
||||
bridge: WeexBridge
|
||||
});
|
||||
/*获取绘图所需的上下文，暂不支持3d*/
|
||||
this.ctx = canvasObj.getContext('2d');
|
||||
if (!this.isAndroid) {
|
||||
this.getDom()
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
this.ctx = uni.createCanvasContext(this.canvasId, this)
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-BAIDU
|
||||
this.redraw()
|
||||
// #endif
|
||||
|
||||
this.$emit('ready', {
|
||||
canvasId: this.canvasId
|
||||
})
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
// #ifndef VUE3
|
||||
beforeDestroy() {
|
||||
this.ctx = null;
|
||||
this.touchs = null;
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
beforeUnmount() {
|
||||
this.ctx = null;
|
||||
this.touchs = null;
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
getDom() {
|
||||
dom.getComponentRect(this.$refs['fui_gcanvas_ag'], option => {
|
||||
if (option && option.result && option.size) {
|
||||
this.nTop = option.size.top
|
||||
this.nLeft = option.size.left
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
isPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (let v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
onTouchstart(e) {
|
||||
if (this.completed) return;
|
||||
let point = {};
|
||||
// #ifndef APP-NVUE
|
||||
point = {
|
||||
x: e.touches[0].x,
|
||||
y: e.touches[0].y
|
||||
};
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
point = {
|
||||
x: e.touches[0].pageX - this.nLeft,
|
||||
y: e.touches[0].pageY - this.nTop
|
||||
};
|
||||
// #endif
|
||||
this.ctx.setStrokeStyle(this.color);
|
||||
this.ctx.setLineWidth(this.lineWidth);
|
||||
this.ctx.setLineCap('round');
|
||||
this.touchs = [point];
|
||||
},
|
||||
mousedown(e) {
|
||||
// #ifdef H5
|
||||
if (!this.isPC() || this.completed) return;
|
||||
let point = {
|
||||
x: e.pageX - e.target.offsetLeft,
|
||||
y: e.pageY - e.target.offsetTop
|
||||
};
|
||||
this.ctx.setStrokeStyle(this.color);
|
||||
this.ctx.setLineWidth(this.lineWidth);
|
||||
this.ctx.setLineCap('round');
|
||||
this.touchs = [point];
|
||||
// #endif
|
||||
},
|
||||
onTouchmove(e) {
|
||||
if (this.completed) return;
|
||||
let point = null;
|
||||
// #ifndef APP-NVUE
|
||||
point = {
|
||||
x: e.touches[0].x,
|
||||
y: e.touches[0].y
|
||||
};
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
//changedTouches
|
||||
point = {
|
||||
x: e.touches[0].pageX - this.nLeft,
|
||||
y: e.touches[0].pageY - this.nTop
|
||||
};
|
||||
// #endif
|
||||
point && this.touchs.push(point)
|
||||
if (this.touchs.length >= 2) {
|
||||
this.startDraw();
|
||||
}
|
||||
},
|
||||
mousemove(e) {
|
||||
// #ifdef H5
|
||||
if (!this.isPC() || this.completed || !this.touchs) return;
|
||||
let point = {
|
||||
x: e.pageX - e.target.offsetLeft,
|
||||
y: e.pageY - e.target.offsetTop
|
||||
};
|
||||
this.touchs.push(point)
|
||||
if (this.touchs.length >= 2) {
|
||||
this.startDraw();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onTouchend(e) {
|
||||
if (this.completed) return;
|
||||
this.touchs = null
|
||||
},
|
||||
mouseup(e) {
|
||||
// #ifdef H5
|
||||
if (!this.isPC() || this.completed) return;
|
||||
this.touchs = null
|
||||
// #endif
|
||||
},
|
||||
mouseleave(e) {
|
||||
// #ifdef H5
|
||||
if (!this.isPC() || this.completed) return;
|
||||
this.touchs = null
|
||||
// #endif
|
||||
},
|
||||
onTouchCancel(e) {
|
||||
if (this.completed) return;
|
||||
// console.log('touchCancel：', e)
|
||||
},
|
||||
startDraw() {
|
||||
this.autograph = true;
|
||||
const point1 = this.touchs[0];
|
||||
const point2 = this.touchs[1];
|
||||
this.touchs.shift();
|
||||
this.ctx.moveTo(point1.x, point1.y);
|
||||
this.ctx.lineTo(point2.x, point2.y);
|
||||
this.ctx.stroke();
|
||||
this.ctx.draw(true);
|
||||
},
|
||||
//重新绘制
|
||||
redraw() {
|
||||
this.completed = false;
|
||||
this.touchs = null;
|
||||
this.autograph = false;
|
||||
this.ctx.clearRect(0, 0, this.w, this.h);
|
||||
this.ctx.beginPath()
|
||||
this.ctx.draw();
|
||||
},
|
||||
drawComplete(callback) {
|
||||
if (!this.autograph && this.tips && this.tips !== true && this.tips !== 'true') {
|
||||
uni.showToast({
|
||||
title: this.tips,
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.completed = true;
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
let time = 50;
|
||||
if (platform === 'android') {
|
||||
time = 200;
|
||||
}
|
||||
setTimeout(() => {
|
||||
// #ifdef MP-ALIPAY
|
||||
this.ctx.toTempFilePath({
|
||||
success: res => {
|
||||
callback && callback(res.apFilePath)
|
||||
},
|
||||
fail: err => {
|
||||
callback && callback(false)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifndef MP-ALIPAY || APP-NVUE
|
||||
uni.canvasToTempFilePath({
|
||||
x: 0,
|
||||
y: 0,
|
||||
canvasId: this.canvasId,
|
||||
fileType: 'png',
|
||||
quality: 1,
|
||||
success: function(res) {
|
||||
callback && callback(res.tempFilePath)
|
||||
},
|
||||
fail() {
|
||||
callback && callback(false)
|
||||
}
|
||||
}, this)
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
this.ctx.toTempFilePath(
|
||||
0,
|
||||
0,
|
||||
this.w * 2,
|
||||
this.h * 2,
|
||||
this.w * 2,
|
||||
this.h * 2,
|
||||
"png",
|
||||
1,
|
||||
function(res) {
|
||||
callback && callback(res.tempFilePath)
|
||||
},
|
||||
function() {
|
||||
callback && callback(false)
|
||||
}
|
||||
)
|
||||
// #endif
|
||||
}, time)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
242
components/firstui/fui-autograph/gcanvas/bridge/bridge-weex.js
Normal file
242
components/firstui/fui-autograph/gcanvas/bridge/bridge-weex.js
Normal file
@ -0,0 +1,242 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6140725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const isWeex = typeof WXEnvironment !== 'undefined';
|
||||
const isWeexIOS = isWeex && /ios/i.test(WXEnvironment.platform);
|
||||
const isWeexAndroid = isWeex && !isWeexIOS;
|
||||
|
||||
import GLmethod from '../context-webgl/GLmethod';
|
||||
|
||||
const GCanvasModule =
|
||||
(typeof weex !== 'undefined' && weex.requireModule) ? (weex.requireModule('gcanvas')) :
|
||||
(typeof __weex_require__ !== 'undefined') ? (__weex_require__('@weex-module/gcanvas')) : {};
|
||||
|
||||
let isDebugging = false;
|
||||
|
||||
let isComboDisabled = false;
|
||||
|
||||
const logCommand = (function () {
|
||||
const methodQuery = [];
|
||||
Object.keys(GLmethod).forEach(key => {
|
||||
methodQuery[GLmethod[key]] = key;
|
||||
})
|
||||
const queryMethod = (id) => {
|
||||
return methodQuery[parseInt(id)] || 'NotFoundMethod';
|
||||
}
|
||||
const logCommand = (id, cmds) => {
|
||||
const mId = cmds.split(',')[0];
|
||||
const mName = queryMethod(mId);
|
||||
console.log(`=== callNative - componentId:${id}; method: ${mName}; cmds: ${cmds}`);
|
||||
}
|
||||
return logCommand;
|
||||
})();
|
||||
|
||||
function joinArray(arr, sep) {
|
||||
let res = '';
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (i !== 0) {
|
||||
res += sep;
|
||||
}
|
||||
res += arr[i];
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
const commandsCache = {}
|
||||
|
||||
const GBridge = {
|
||||
|
||||
callEnable: (ref, configArray) => {
|
||||
|
||||
commandsCache[ref] = [];
|
||||
|
||||
return GCanvasModule.enable({
|
||||
componentId: ref,
|
||||
config: configArray
|
||||
});
|
||||
},
|
||||
|
||||
callEnableDebug: () => {
|
||||
isDebugging = true;
|
||||
},
|
||||
|
||||
callEnableDisableCombo: () => {
|
||||
isComboDisabled = true;
|
||||
},
|
||||
|
||||
callSetContextType: function (componentId, context_type) {
|
||||
GCanvasModule.setContextType(context_type, componentId);
|
||||
},
|
||||
|
||||
callReset: function(id){
|
||||
GCanvasModule.resetComponent && canvasModule.resetComponent(componentId);
|
||||
},
|
||||
|
||||
render: isWeexIOS ? function (componentId) {
|
||||
return GCanvasModule.extendCallNative({
|
||||
contextId: componentId,
|
||||
type: 0x60000001
|
||||
});
|
||||
} : function (componentId) {
|
||||
return callGCanvasLinkNative(componentId, 0x60000001, 'render');
|
||||
},
|
||||
|
||||
render2d: isWeexIOS ? function (componentId, commands, callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
GCanvasModule.render([commands, callback?true:false], componentId, callback);
|
||||
|
||||
} : function (componentId, commands,callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
callGCanvasLinkNative(componentId, 0x20000001, commands);
|
||||
if(callback){
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
callExtendCallNative: isWeexIOS ? function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
} : function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
},
|
||||
|
||||
|
||||
flushNative: isWeexIOS ? function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = GCanvasModule.extendCallNative({
|
||||
"contextId": componentId,
|
||||
"type": 0x60000000,
|
||||
"args": cmdArgs
|
||||
});
|
||||
|
||||
const res = result && result.result;
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + res);
|
||||
}
|
||||
|
||||
return res;
|
||||
|
||||
} : function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = callGCanvasLinkNative(componentId, 0x60000000, cmdArgs);
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + result);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
callNative: function (componentId, cmdArgs, cache) {
|
||||
|
||||
if (isDebugging) {
|
||||
logCommand(componentId, cmdArgs);
|
||||
}
|
||||
|
||||
commandsCache[componentId].push(cmdArgs);
|
||||
|
||||
if (!cache || isComboDisabled) {
|
||||
return GBridge.flushNative(componentId);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
|
||||
texImage2D(componentId, ...args) {
|
||||
if (isWeexIOS) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 6 + ',' + target + ',' + level + ',' + internalformat + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 9 + ',' + target + ',' + level + ',' + internalformat + ',' + width + ',' + height + ',' + border + ',' +
|
||||
+ format + ',' + type + ',' + (image ? image.src : 0)
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, format, type, image.src);
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, width, height, border, format, type, (image ? image.src : 0));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image) {
|
||||
if (isWeexIOS) {
|
||||
if (arguments.length === 8) {
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texSubImage2D + ',' + 6 + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset, + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
GCanvasModule.texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image.src);
|
||||
}
|
||||
},
|
||||
|
||||
bindImageTexture(componentId, src, imageId) {
|
||||
GCanvasModule.bindImageTexture([src, imageId], componentId);
|
||||
},
|
||||
|
||||
perloadImage([url, id], callback) {
|
||||
GCanvasModule.preLoadImage([url, id], function (image) {
|
||||
image.url = url;
|
||||
image.id = id;
|
||||
callback(image);
|
||||
});
|
||||
},
|
||||
|
||||
measureText(text, fontStyle, componentId) {
|
||||
return GCanvasModule.measureText([text, fontStyle], componentId);
|
||||
},
|
||||
|
||||
getImageData (componentId, x, y, w, h, callback) {
|
||||
GCanvasModule.getImageData([x, y,w,h],componentId,callback);
|
||||
},
|
||||
|
||||
putImageData (componentId, data, x, y, w, h, callback) {
|
||||
GCanvasModule.putImageData([x, y,w,h,data],componentId,callback);
|
||||
},
|
||||
|
||||
toTempFilePath(componentId, x, y, width, height, destWidth, destHeight, fileType, quality, callback){
|
||||
GCanvasModule.toTempFilePath([x, y, width,height, destWidth, destHeight, fileType, quality], componentId, callback);
|
||||
}
|
||||
}
|
||||
|
||||
export default GBridge;
|
||||
@ -0,0 +1,19 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 614 072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStyleLinearGradient {
|
||||
|
||||
constructor(x0, y0, x1, y1) {
|
||||
this._start_pos = { _x: x0, _y: y0 };
|
||||
this._end_pos = { _x: x1, _y: y1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop = function (pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleLinearGradient;
|
||||
@ -0,0 +1,9 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1861 4 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStylePattern {
|
||||
constructor(img, pattern) {
|
||||
this._style = pattern;
|
||||
this._img = img;
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStylePattern;
|
||||
@ -0,0 +1,18 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 07 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStyleRadialGradient {
|
||||
constructor(x0, y0, r0, x1, y1, r1) {
|
||||
this._start_pos = { _x: x0, _y: y0, _r: r0 };
|
||||
this._end_pos = { _x: x1, _y: y1, _r: r1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop(pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleRadialGradient;
|
||||
@ -0,0 +1,667 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86140 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import FillStylePattern from './FillStylePattern';
|
||||
import FillStyleLinearGradient from './FillStyleLinearGradient';
|
||||
import FillStyleRadialGradient from './FillStyleRadialGradient';
|
||||
import GImage from '../env/image.js';
|
||||
import {
|
||||
ArrayBufferToBase64,
|
||||
Base64ToUint8ClampedArray
|
||||
} from '../env/tool.js';
|
||||
|
||||
export default class CanvasRenderingContext2D {
|
||||
|
||||
_drawCommands = '';
|
||||
|
||||
_globalAlpha = 1.0;
|
||||
|
||||
_fillStyle = 'rgb(0,0,0)';
|
||||
_strokeStyle = 'rgb(0,0,0)';
|
||||
|
||||
_lineWidth = 1;
|
||||
_lineCap = 'butt';
|
||||
_lineJoin = 'miter';
|
||||
|
||||
_miterLimit = 10;
|
||||
|
||||
_globalCompositeOperation = 'source-over';
|
||||
|
||||
_textAlign = 'start';
|
||||
_textBaseline = 'alphabetic';
|
||||
|
||||
_font = '10px sans-serif';
|
||||
|
||||
_savedGlobalAlpha = [];
|
||||
|
||||
timer = null;
|
||||
componentId = null;
|
||||
|
||||
_notCommitDrawImageCache = [];
|
||||
_needRedrawImageCache = [];
|
||||
_redrawCommands = '';
|
||||
_autoSaveContext = true;
|
||||
// _imageMap = new GHashMap();
|
||||
// _textureMap = new GHashMap();
|
||||
|
||||
constructor() {
|
||||
this.className = 'CanvasRenderingContext2D';
|
||||
//this.save()
|
||||
}
|
||||
|
||||
setFillStyle(value) {
|
||||
this.fillStyle = value;
|
||||
}
|
||||
|
||||
set fillStyle(value) {
|
||||
this._fillStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("F" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
const image = value._img;
|
||||
if (!image.complete) {
|
||||
image.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
|
||||
//CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get fillStyle() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
|
||||
get globalAlpha() {
|
||||
return this._globalAlpha;
|
||||
}
|
||||
|
||||
setGlobalAlpha(value) {
|
||||
this.globalAlpha = value;
|
||||
}
|
||||
|
||||
set globalAlpha(value) {
|
||||
this._globalAlpha = value;
|
||||
this._drawCommands = this._drawCommands.concat("a" + value.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
|
||||
get strokeStyle() {
|
||||
return this._strokeStyle;
|
||||
}
|
||||
|
||||
setStrokeStyle(value) {
|
||||
this.strokeStyle = value;
|
||||
}
|
||||
|
||||
set strokeStyle(value) {
|
||||
|
||||
this._strokeStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("S" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y + ",".toFixed(2) + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get lineWidth() {
|
||||
return this._lineWidth;
|
||||
}
|
||||
|
||||
setLineWidth(value) {
|
||||
this.lineWidth = value;
|
||||
}
|
||||
|
||||
set lineWidth(value) {
|
||||
this._lineWidth = value;
|
||||
this._drawCommands = this._drawCommands.concat("W" + value + ";");
|
||||
}
|
||||
|
||||
get lineCap() {
|
||||
return this._lineCap;
|
||||
}
|
||||
|
||||
setLineCap(value) {
|
||||
this.lineCap = value;
|
||||
}
|
||||
|
||||
set lineCap(value) {
|
||||
this._lineCap = value;
|
||||
this._drawCommands = this._drawCommands.concat("C" + value + ";");
|
||||
}
|
||||
|
||||
get lineJoin() {
|
||||
return this._lineJoin;
|
||||
}
|
||||
|
||||
setLineJoin(value) {
|
||||
this.lineJoin = value
|
||||
}
|
||||
|
||||
set lineJoin(value) {
|
||||
this._lineJoin = value;
|
||||
this._drawCommands = this._drawCommands.concat("J" + value + ";");
|
||||
}
|
||||
|
||||
get miterLimit() {
|
||||
return this._miterLimit;
|
||||
}
|
||||
|
||||
setMiterLimit(value) {
|
||||
this.miterLimit = value
|
||||
}
|
||||
|
||||
set miterLimit(value) {
|
||||
this._miterLimit = value;
|
||||
this._drawCommands = this._drawCommands.concat("M" + value + ";");
|
||||
}
|
||||
|
||||
get globalCompositeOperation() {
|
||||
return this._globalCompositeOperation;
|
||||
}
|
||||
|
||||
set globalCompositeOperation(value) {
|
||||
|
||||
this._globalCompositeOperation = value;
|
||||
let mode = 0;
|
||||
switch (value) {
|
||||
case "source-over":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-atop":
|
||||
mode = 5;
|
||||
break;
|
||||
case "source-in":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-out":
|
||||
mode = 2;
|
||||
break;
|
||||
case "destination-over":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-atop":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-in":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-out":
|
||||
mode = 3;
|
||||
break;
|
||||
case "lighter":
|
||||
mode = 1;
|
||||
break;
|
||||
case "copy":
|
||||
mode = 2;
|
||||
break;
|
||||
case "xor":
|
||||
mode = 6;
|
||||
break;
|
||||
default:
|
||||
mode = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("B" + mode + ";");
|
||||
}
|
||||
|
||||
get textAlign() {
|
||||
return this._textAlign;
|
||||
}
|
||||
|
||||
setTextAlign(value) {
|
||||
this.textAlign = value
|
||||
}
|
||||
|
||||
set textAlign(value) {
|
||||
|
||||
this._textAlign = value;
|
||||
let Align = 0;
|
||||
switch (value) {
|
||||
case "start":
|
||||
Align = 0;
|
||||
break;
|
||||
case "end":
|
||||
Align = 1;
|
||||
break;
|
||||
case "left":
|
||||
Align = 2;
|
||||
break;
|
||||
case "center":
|
||||
Align = 3;
|
||||
break;
|
||||
case "right":
|
||||
Align = 4;
|
||||
break;
|
||||
default:
|
||||
Align = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("A" + Align + ";");
|
||||
}
|
||||
|
||||
get textBaseline() {
|
||||
return this._textBaseline;
|
||||
}
|
||||
|
||||
setTextBaseline(value) {
|
||||
this.textBaseline = value
|
||||
}
|
||||
|
||||
set textBaseline(value) {
|
||||
this._textBaseline = value;
|
||||
let baseline = 0;
|
||||
switch (value) {
|
||||
case "alphabetic":
|
||||
baseline = 0;
|
||||
break;
|
||||
case "middle":
|
||||
baseline = 1;
|
||||
break;
|
||||
case "top":
|
||||
baseline = 2;
|
||||
break;
|
||||
case "hanging":
|
||||
baseline = 3;
|
||||
break;
|
||||
case "bottom":
|
||||
baseline = 4;
|
||||
break;
|
||||
case "ideographic":
|
||||
baseline = 5;
|
||||
break;
|
||||
default:
|
||||
baseline = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("E" + baseline + ";");
|
||||
}
|
||||
|
||||
get font() {
|
||||
return this._font;
|
||||
}
|
||||
|
||||
setFontSize(size) {
|
||||
var str = this._font;
|
||||
var strs = str.trim().split(/\s+/);
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
var values = ["normal", "italic", "oblique", "normal", "small-caps", "normal", "bold",
|
||||
"bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900",
|
||||
"normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
|
||||
"semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
|
||||
];
|
||||
|
||||
if (-1 == values.indexOf(strs[i].trim())) {
|
||||
if (typeof size === 'string') {
|
||||
strs[i] = size;
|
||||
} else if (typeof size === 'number') {
|
||||
strs[i] = String(size) + 'px';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.font = strs.join(" ");
|
||||
}
|
||||
|
||||
set font(value) {
|
||||
this._font = value;
|
||||
this._drawCommands = this._drawCommands.concat("j" + value + ";");
|
||||
}
|
||||
|
||||
setTransform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("t" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
transform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("f" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx + "," + ty + ";");
|
||||
}
|
||||
|
||||
resetTransform() {
|
||||
this._drawCommands = this._drawCommands.concat("m;");
|
||||
}
|
||||
|
||||
scale(a, d) {
|
||||
this._drawCommands = this._drawCommands.concat("k" + a.toFixed(2) + "," +
|
||||
d.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
rotate(angle) {
|
||||
this._drawCommands = this._drawCommands
|
||||
.concat("r" + angle.toFixed(6) + ";");
|
||||
}
|
||||
|
||||
translate(tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("l" + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
save() {
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._drawCommands = this._drawCommands.concat("v;");
|
||||
}
|
||||
|
||||
restore() {
|
||||
this._drawCommands = this._drawCommands.concat("e;");
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
}
|
||||
|
||||
createPattern(img, pattern) {
|
||||
if (typeof img === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = img;
|
||||
img = imgObj;
|
||||
}
|
||||
return new FillStylePattern(img, pattern);
|
||||
}
|
||||
|
||||
createLinearGradient(x0, y0, x1, y1) {
|
||||
return new FillStyleLinearGradient(x0, y0, x1, y1);
|
||||
}
|
||||
|
||||
createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
|
||||
return new FillStyleRadialGradient(x0, y0, r0, x1, y1, r1);
|
||||
};
|
||||
|
||||
createCircularGradient = function(x0, y0, r0) {
|
||||
return new FillStyleRadialGradient(x0, y0, 0, x0, y0, r0);
|
||||
};
|
||||
|
||||
strokeRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("s" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
|
||||
clearRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("c" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
clip() {
|
||||
this._drawCommands = this._drawCommands.concat("p;");
|
||||
}
|
||||
|
||||
resetClip() {
|
||||
this._drawCommands = this._drawCommands.concat("q;");
|
||||
}
|
||||
|
||||
closePath() {
|
||||
this._drawCommands = this._drawCommands.concat("o;");
|
||||
}
|
||||
|
||||
moveTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("g" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
lineTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("i" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
quadraticCurveTo = function(cpx, cpy, x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("u" + cpx + "," + cpy + "," + x + "," + y + ";");
|
||||
}
|
||||
|
||||
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, ) {
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"z" + cp1x.toFixed(2) + "," + cp1y.toFixed(2) + "," + cp2x.toFixed(2) + "," + cp2y.toFixed(2) + "," +
|
||||
x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
arcTo(x1, y1, x2, y2, radius) {
|
||||
this._drawCommands = this._drawCommands.concat("h" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + radius + ";");
|
||||
}
|
||||
|
||||
beginPath() {
|
||||
this._drawCommands = this._drawCommands.concat("b;");
|
||||
}
|
||||
|
||||
|
||||
fillRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("n" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
rect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("w" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
fill() {
|
||||
this._drawCommands = this._drawCommands.concat("L;");
|
||||
}
|
||||
|
||||
stroke(path) {
|
||||
this._drawCommands = this._drawCommands.concat("x;");
|
||||
}
|
||||
|
||||
arc(x, y, radius, startAngle, endAngle, anticlockwise) {
|
||||
|
||||
let ianticlockwise = 0;
|
||||
if (anticlockwise) {
|
||||
ianticlockwise = 1;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"y" + x.toFixed(2) + "," + y.toFixed(2) + "," +
|
||||
radius.toFixed(2) + "," + startAngle + "," + endAngle + "," + ianticlockwise +
|
||||
";"
|
||||
);
|
||||
}
|
||||
|
||||
fillText(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("T" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
strokeText = function(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("U" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
measureText(text) {
|
||||
return CanvasRenderingContext2D.GBridge.measureText(text, this.font, this.componentId);
|
||||
}
|
||||
|
||||
isPointInPath = function(x, y) {
|
||||
throw new Error('GCanvas not supported yet');
|
||||
}
|
||||
|
||||
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
if (typeof image === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = image;
|
||||
image = imgObj;
|
||||
}
|
||||
if (image instanceof GImage) {
|
||||
if (!image.complete) {
|
||||
imgObj.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
var srcArgs = [image, sx, sy, sw, sh, dx, dy, dw, dh];
|
||||
var args = [];
|
||||
for (var arg in srcArgs) {
|
||||
if (typeof(srcArgs[arg]) != 'undefined') {
|
||||
args.push(srcArgs[arg]);
|
||||
}
|
||||
}
|
||||
this.__drawImage.apply(this, args);
|
||||
//this.__drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh);
|
||||
}
|
||||
}
|
||||
|
||||
__drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
const numArgs = arguments.length;
|
||||
|
||||
function drawImageCommands() {
|
||||
|
||||
if (numArgs === 3) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + image.width + "," + image.height + ";");
|
||||
} else if (numArgs === 5) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
const width = parseInt(sw) || image.width;
|
||||
const height = parseInt(sh) || image.height;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + width + "," + height + ";");
|
||||
} else if (numArgs === 9) {
|
||||
sx = parseFloat(sx) || 0.0;
|
||||
sy = parseFloat(sy) || 0.0;
|
||||
sw = parseInt(sw) || image.width;
|
||||
sh = parseInt(sh) || image.height;
|
||||
dx = parseFloat(dx) || 0.0;
|
||||
dy = parseFloat(dy) || 0.0;
|
||||
dw = parseInt(dw) || image.width;
|
||||
dh = parseInt(dh) || image.height;
|
||||
|
||||
return ("d" + image._id + "," +
|
||||
sx + "," + sy + "," + sw + "," + sh + "," +
|
||||
dx + "," + dy + "," + dw + "," + dh + ";");
|
||||
}
|
||||
}
|
||||
this._drawCommands += drawImageCommands();
|
||||
}
|
||||
|
||||
_flush(reserve, callback) {
|
||||
const commands = this._drawCommands;
|
||||
this._drawCommands = '';
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
this._needRender = false;
|
||||
}
|
||||
|
||||
_redrawflush(reserve, callback) {
|
||||
const commands = this._redrawCommands;
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
if (this._needRedrawImageCache.length == 0) {
|
||||
this._redrawCommands = '';
|
||||
}
|
||||
}
|
||||
|
||||
draw(reserve, callback) {
|
||||
if (!reserve) {
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._redrawCommands = this._drawCommands;
|
||||
this._needRedrawImageCache = this._notCommitDrawImageCache;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
} else {
|
||||
this._drawCommands = ("e;X;v;" + this._drawCommands);
|
||||
}
|
||||
} else {
|
||||
this._needRedrawImageCache = this._needRedrawImageCache.concat(this._notCommitDrawImageCache);
|
||||
this._redrawCommands += this._drawCommands;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache = [];
|
||||
if (this._flush) {
|
||||
this._flush(reserve, callback);
|
||||
}
|
||||
}
|
||||
|
||||
getImageData(x, y, w, h, callback) {
|
||||
CanvasRenderingContext2D.GBridge.getImageData(this.componentId, x, y, w, h, function(res) {
|
||||
res.data = Base64ToUint8ClampedArray(res.data);
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
putImageData(data, x, y, w, h, callback) {
|
||||
if (data instanceof Uint8ClampedArray) {
|
||||
data = ArrayBufferToBase64(data);
|
||||
CanvasRenderingContext2D.GBridge.putImageData(this.componentId, data, x, y, w, h, function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toTempFilePath(x, y, width, height, destWidth, destHeight, fileType, quality, callback) {
|
||||
CanvasRenderingContext2D.GBridge.toTempFilePath(this.componentId, x, y, width, height, destWidth, destHeight,
|
||||
fileType, quality,
|
||||
function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 614 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default class WebGLActiveInfo {
|
||||
className = 'WebGLActiveInfo';
|
||||
|
||||
constructor({
|
||||
type, name, size
|
||||
}) {
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.size = size;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLBuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLFrameBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLFramebuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
299
components/firstui/fui-autograph/gcanvas/context-webgl/GLenum.js
Normal file
299
components/firstui/fui-autograph/gcanvas/context-webgl/GLenum.js
Normal file
@ -0,0 +1,299 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 4 07 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default {
|
||||
"DEPTH_BUFFER_BIT": 256,
|
||||
"STENCIL_BUFFER_BIT": 1024,
|
||||
"COLOR_BUFFER_BIT": 16384,
|
||||
"POINTS": 0,
|
||||
"LINES": 1,
|
||||
"LINE_LOOP": 2,
|
||||
"LINE_STRIP": 3,
|
||||
"TRIANGLES": 4,
|
||||
"TRIANGLE_STRIP": 5,
|
||||
"TRIANGLE_FAN": 6,
|
||||
"ZERO": 0,
|
||||
"ONE": 1,
|
||||
"SRC_COLOR": 768,
|
||||
"ONE_MINUS_SRC_COLOR": 769,
|
||||
"SRC_ALPHA": 770,
|
||||
"ONE_MINUS_SRC_ALPHA": 771,
|
||||
"DST_ALPHA": 772,
|
||||
"ONE_MINUS_DST_ALPHA": 773,
|
||||
"DST_COLOR": 774,
|
||||
"ONE_MINUS_DST_COLOR": 775,
|
||||
"SRC_ALPHA_SATURATE": 776,
|
||||
"FUNC_ADD": 32774,
|
||||
"BLEND_EQUATION": 32777,
|
||||
"BLEND_EQUATION_RGB": 32777,
|
||||
"BLEND_EQUATION_ALPHA": 34877,
|
||||
"FUNC_SUBTRACT": 32778,
|
||||
"FUNC_REVERSE_SUBTRACT": 32779,
|
||||
"BLEND_DST_RGB": 32968,
|
||||
"BLEND_SRC_RGB": 32969,
|
||||
"BLEND_DST_ALPHA": 32970,
|
||||
"BLEND_SRC_ALPHA": 32971,
|
||||
"CONSTANT_COLOR": 32769,
|
||||
"ONE_MINUS_CONSTANT_COLOR": 32770,
|
||||
"CONSTANT_ALPHA": 32771,
|
||||
"ONE_MINUS_CONSTANT_ALPHA": 32772,
|
||||
"BLEND_COLOR": 32773,
|
||||
"ARRAY_BUFFER": 34962,
|
||||
"ELEMENT_ARRAY_BUFFER": 34963,
|
||||
"ARRAY_BUFFER_BINDING": 34964,
|
||||
"ELEMENT_ARRAY_BUFFER_BINDING": 34965,
|
||||
"STREAM_DRAW": 35040,
|
||||
"STATIC_DRAW": 35044,
|
||||
"DYNAMIC_DRAW": 35048,
|
||||
"BUFFER_SIZE": 34660,
|
||||
"BUFFER_USAGE": 34661,
|
||||
"CURRENT_VERTEX_ATTRIB": 34342,
|
||||
"FRONT": 1028,
|
||||
"BACK": 1029,
|
||||
"FRONT_AND_BACK": 1032,
|
||||
"TEXTURE_2D": 3553,
|
||||
"CULL_FACE": 2884,
|
||||
"BLEND": 3042,
|
||||
"DITHER": 3024,
|
||||
"STENCIL_TEST": 2960,
|
||||
"DEPTH_TEST": 2929,
|
||||
"SCISSOR_TEST": 3089,
|
||||
"POLYGON_OFFSET_FILL": 32823,
|
||||
"SAMPLE_ALPHA_TO_COVERAGE": 32926,
|
||||
"SAMPLE_COVERAGE": 32928,
|
||||
"NO_ERROR": 0,
|
||||
"INVALID_ENUM": 1280,
|
||||
"INVALID_VALUE": 1281,
|
||||
"INVALID_OPERATION": 1282,
|
||||
"OUT_OF_MEMORY": 1285,
|
||||
"CW": 2304,
|
||||
"CCW": 2305,
|
||||
"LINE_WIDTH": 2849,
|
||||
"ALIASED_POINT_SIZE_RANGE": 33901,
|
||||
"ALIASED_LINE_WIDTH_RANGE": 33902,
|
||||
"CULL_FACE_MODE": 2885,
|
||||
"FRONT_FACE": 2886,
|
||||
"DEPTH_RANGE": 2928,
|
||||
"DEPTH_WRITEMASK": 2930,
|
||||
"DEPTH_CLEAR_VALUE": 2931,
|
||||
"DEPTH_FUNC": 2932,
|
||||
"STENCIL_CLEAR_VALUE": 2961,
|
||||
"STENCIL_FUNC": 2962,
|
||||
"STENCIL_FAIL": 2964,
|
||||
"STENCIL_PASS_DEPTH_FAIL": 2965,
|
||||
"STENCIL_PASS_DEPTH_PASS": 2966,
|
||||
"STENCIL_REF": 2967,
|
||||
"STENCIL_VALUE_MASK": 2963,
|
||||
"STENCIL_WRITEMASK": 2968,
|
||||
"STENCIL_BACK_FUNC": 34816,
|
||||
"STENCIL_BACK_FAIL": 34817,
|
||||
"STENCIL_BACK_PASS_DEPTH_FAIL": 34818,
|
||||
"STENCIL_BACK_PASS_DEPTH_PASS": 34819,
|
||||
"STENCIL_BACK_REF": 36003,
|
||||
"STENCIL_BACK_VALUE_MASK": 36004,
|
||||
"STENCIL_BACK_WRITEMASK": 36005,
|
||||
"VIEWPORT": 2978,
|
||||
"SCISSOR_BOX": 3088,
|
||||
"COLOR_CLEAR_VALUE": 3106,
|
||||
"COLOR_WRITEMASK": 3107,
|
||||
"UNPACK_ALIGNMENT": 3317,
|
||||
"PACK_ALIGNMENT": 3333,
|
||||
"MAX_TEXTURE_SIZE": 3379,
|
||||
"MAX_VIEWPORT_DIMS": 3386,
|
||||
"SUBPIXEL_BITS": 3408,
|
||||
"RED_BITS": 3410,
|
||||
"GREEN_BITS": 3411,
|
||||
"BLUE_BITS": 3412,
|
||||
"ALPHA_BITS": 3413,
|
||||
"DEPTH_BITS": 3414,
|
||||
"STENCIL_BITS": 3415,
|
||||
"POLYGON_OFFSET_UNITS": 10752,
|
||||
"POLYGON_OFFSET_FACTOR": 32824,
|
||||
"TEXTURE_BINDING_2D": 32873,
|
||||
"SAMPLE_BUFFERS": 32936,
|
||||
"SAMPLES": 32937,
|
||||
"SAMPLE_COVERAGE_VALUE": 32938,
|
||||
"SAMPLE_COVERAGE_INVERT": 32939,
|
||||
"COMPRESSED_TEXTURE_FORMATS": 34467,
|
||||
"DONT_CARE": 4352,
|
||||
"FASTEST": 4353,
|
||||
"NICEST": 4354,
|
||||
"GENERATE_MIPMAP_HINT": 33170,
|
||||
"BYTE": 5120,
|
||||
"UNSIGNED_BYTE": 5121,
|
||||
"SHORT": 5122,
|
||||
"UNSIGNED_SHORT": 5123,
|
||||
"INT": 5124,
|
||||
"UNSIGNED_INT": 5125,
|
||||
"FLOAT": 5126,
|
||||
"DEPTH_COMPONENT": 6402,
|
||||
"ALPHA": 6406,
|
||||
"RGB": 6407,
|
||||
"RGBA": 6408,
|
||||
"LUMINANCE": 6409,
|
||||
"LUMINANCE_ALPHA": 6410,
|
||||
"UNSIGNED_SHORT_4_4_4_4": 32819,
|
||||
"UNSIGNED_SHORT_5_5_5_1": 32820,
|
||||
"UNSIGNED_SHORT_5_6_5": 33635,
|
||||
"FRAGMENT_SHADER": 35632,
|
||||
"VERTEX_SHADER": 35633,
|
||||
"MAX_VERTEX_ATTRIBS": 34921,
|
||||
"MAX_VERTEX_UNIFORM_VECTORS": 36347,
|
||||
"MAX_VARYING_VECTORS": 36348,
|
||||
"MAX_COMBINED_TEXTURE_IMAGE_UNITS": 35661,
|
||||
"MAX_VERTEX_TEXTURE_IMAGE_UNITS": 35660,
|
||||
"MAX_TEXTURE_IMAGE_UNITS": 34930,
|
||||
"MAX_FRAGMENT_UNIFORM_VECTORS": 36349,
|
||||
"SHADER_TYPE": 35663,
|
||||
"DELETE_STATUS": 35712,
|
||||
"LINK_STATUS": 35714,
|
||||
"VALIDATE_STATUS": 35715,
|
||||
"ATTACHED_SHADERS": 35717,
|
||||
"ACTIVE_UNIFORMS": 35718,
|
||||
"ACTIVE_ATTRIBUTES": 35721,
|
||||
"SHADING_LANGUAGE_VERSION": 35724,
|
||||
"CURRENT_PROGRAM": 35725,
|
||||
"NEVER": 512,
|
||||
"LESS": 513,
|
||||
"EQUAL": 514,
|
||||
"LEQUAL": 515,
|
||||
"GREATER": 516,
|
||||
"NOTEQUAL": 517,
|
||||
"GEQUAL": 518,
|
||||
"ALWAYS": 519,
|
||||
"KEEP": 7680,
|
||||
"REPLACE": 7681,
|
||||
"INCR": 7682,
|
||||
"DECR": 7683,
|
||||
"INVERT": 5386,
|
||||
"INCR_WRAP": 34055,
|
||||
"DECR_WRAP": 34056,
|
||||
"VENDOR": 7936,
|
||||
"RENDERER": 7937,
|
||||
"VERSION": 7938,
|
||||
"NEAREST": 9728,
|
||||
"LINEAR": 9729,
|
||||
"NEAREST_MIPMAP_NEAREST": 9984,
|
||||
"LINEAR_MIPMAP_NEAREST": 9985,
|
||||
"NEAREST_MIPMAP_LINEAR": 9986,
|
||||
"LINEAR_MIPMAP_LINEAR": 9987,
|
||||
"TEXTURE_MAG_FILTER": 10240,
|
||||
"TEXTURE_MIN_FILTER": 10241,
|
||||
"TEXTURE_WRAP_S": 10242,
|
||||
"TEXTURE_WRAP_T": 10243,
|
||||
"TEXTURE": 5890,
|
||||
"TEXTURE_CUBE_MAP": 34067,
|
||||
"TEXTURE_BINDING_CUBE_MAP": 34068,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_X": 34069,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_X": 34070,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Y": 34071,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Y": 34072,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Z": 34073,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Z": 34074,
|
||||
"MAX_CUBE_MAP_TEXTURE_SIZE": 34076,
|
||||
"TEXTURE0": 33984,
|
||||
"TEXTURE1": 33985,
|
||||
"TEXTURE2": 33986,
|
||||
"TEXTURE3": 33987,
|
||||
"TEXTURE4": 33988,
|
||||
"TEXTURE5": 33989,
|
||||
"TEXTURE6": 33990,
|
||||
"TEXTURE7": 33991,
|
||||
"TEXTURE8": 33992,
|
||||
"TEXTURE9": 33993,
|
||||
"TEXTURE10": 33994,
|
||||
"TEXTURE11": 33995,
|
||||
"TEXTURE12": 33996,
|
||||
"TEXTURE13": 33997,
|
||||
"TEXTURE14": 33998,
|
||||
"TEXTURE15": 33999,
|
||||
"TEXTURE16": 34000,
|
||||
"TEXTURE17": 34001,
|
||||
"TEXTURE18": 34002,
|
||||
"TEXTURE19": 34003,
|
||||
"TEXTURE20": 34004,
|
||||
"TEXTURE21": 34005,
|
||||
"TEXTURE22": 34006,
|
||||
"TEXTURE23": 34007,
|
||||
"TEXTURE24": 34008,
|
||||
"TEXTURE25": 34009,
|
||||
"TEXTURE26": 34010,
|
||||
"TEXTURE27": 34011,
|
||||
"TEXTURE28": 34012,
|
||||
"TEXTURE29": 34013,
|
||||
"TEXTURE30": 34014,
|
||||
"TEXTURE31": 34015,
|
||||
"ACTIVE_TEXTURE": 34016,
|
||||
"REPEAT": 10497,
|
||||
"CLAMP_TO_EDGE": 33071,
|
||||
"MIRRORED_REPEAT": 33648,
|
||||
"FLOAT_VEC2": 35664,
|
||||
"FLOAT_VEC3": 35665,
|
||||
"FLOAT_VEC4": 35666,
|
||||
"INT_VEC2": 35667,
|
||||
"INT_VEC3": 35668,
|
||||
"INT_VEC4": 35669,
|
||||
"BOOL": 35670,
|
||||
"BOOL_VEC2": 35671,
|
||||
"BOOL_VEC3": 35672,
|
||||
"BOOL_VEC4": 35673,
|
||||
"FLOAT_MAT2": 35674,
|
||||
"FLOAT_MAT3": 35675,
|
||||
"FLOAT_MAT4": 35676,
|
||||
"SAMPLER_2D": 35678,
|
||||
"SAMPLER_CUBE": 35680,
|
||||
"VERTEX_ATTRIB_ARRAY_ENABLED": 34338,
|
||||
"VERTEX_ATTRIB_ARRAY_SIZE": 34339,
|
||||
"VERTEX_ATTRIB_ARRAY_STRIDE": 34340,
|
||||
"VERTEX_ATTRIB_ARRAY_TYPE": 34341,
|
||||
"VERTEX_ATTRIB_ARRAY_NORMALIZED": 34922,
|
||||
"VERTEX_ATTRIB_ARRAY_POINTER": 34373,
|
||||
"VERTEX_ATTRIB_ARRAY_BUFFER_BINDING": 34975,
|
||||
"IMPLEMENTATION_COLOR_READ_TYPE": 35738,
|
||||
"IMPLEMENTATION_COLOR_READ_FORMAT": 35739,
|
||||
"COMPILE_STATUS": 35713,
|
||||
"LOW_FLOAT": 36336,
|
||||
"MEDIUM_FLOAT": 36337,
|
||||
"HIGH_FLOAT": 36338,
|
||||
"LOW_INT": 36339,
|
||||
"MEDIUM_INT": 36340,
|
||||
"HIGH_INT": 36341,
|
||||
"FRAMEBUFFER": 36160,
|
||||
"RENDERBUFFER": 36161,
|
||||
"RGBA4": 32854,
|
||||
"RGB5_A1": 32855,
|
||||
"RGB565": 36194,
|
||||
"DEPTH_COMPONENT16": 33189,
|
||||
"STENCIL_INDEX8": 36168,
|
||||
"DEPTH_STENCIL": 34041,
|
||||
"RENDERBUFFER_WIDTH": 36162,
|
||||
"RENDERBUFFER_HEIGHT": 36163,
|
||||
"RENDERBUFFER_INTERNAL_FORMAT": 36164,
|
||||
"RENDERBUFFER_RED_SIZE": 36176,
|
||||
"RENDERBUFFER_GREEN_SIZE": 36177,
|
||||
"RENDERBUFFER_BLUE_SIZE": 36178,
|
||||
"RENDERBUFFER_ALPHA_SIZE": 36179,
|
||||
"RENDERBUFFER_DEPTH_SIZE": 36180,
|
||||
"RENDERBUFFER_STENCIL_SIZE": 36181,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE": 36048,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_NAME": 36049,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL": 36050,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE": 36051,
|
||||
"COLOR_ATTACHMENT0": 36064,
|
||||
"DEPTH_ATTACHMENT": 36096,
|
||||
"STENCIL_ATTACHMENT": 36128,
|
||||
"DEPTH_STENCIL_ATTACHMENT": 33306,
|
||||
"NONE": 0,
|
||||
"FRAMEBUFFER_COMPLETE": 36053,
|
||||
"FRAMEBUFFER_INCOMPLETE_ATTACHMENT": 36054,
|
||||
"FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT": 36055,
|
||||
"FRAMEBUFFER_INCOMPLETE_DIMENSIONS": 36057,
|
||||
"FRAMEBUFFER_UNSUPPORTED": 36061,
|
||||
"FRAMEBUFFER_BINDING": 36006,
|
||||
"RENDERBUFFER_BINDING": 36007,
|
||||
"MAX_RENDERBUFFER_SIZE": 34024,
|
||||
"INVALID_FRAMEBUFFER_OPERATION": 1286,
|
||||
"UNPACK_FLIP_Y_WEBGL": 37440,
|
||||
"UNPACK_PREMULTIPLY_ALPHA_WEBGL": 37441,
|
||||
"CONTEXT_LOST_WEBGL": 37442,
|
||||
"UNPACK_COLORSPACE_CONVERSION_WEBGL": 37443,
|
||||
"BROWSER_DEFAULT_WEBGL": 37444
|
||||
};
|
||||
@ -0,0 +1,143 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
let i = 1;
|
||||
|
||||
const GLmethod = {};
|
||||
|
||||
GLmethod.activeTexture = i++; //1
|
||||
GLmethod.attachShader = i++;
|
||||
GLmethod.bindAttribLocation = i++;
|
||||
GLmethod.bindBuffer = i++;
|
||||
GLmethod.bindFramebuffer = i++;
|
||||
GLmethod.bindRenderbuffer = i++;
|
||||
GLmethod.bindTexture = i++;
|
||||
GLmethod.blendColor = i++;
|
||||
GLmethod.blendEquation = i++;
|
||||
GLmethod.blendEquationSeparate = i++; //10
|
||||
GLmethod.blendFunc = i++;
|
||||
GLmethod.blendFuncSeparate = i++;
|
||||
GLmethod.bufferData = i++;
|
||||
GLmethod.bufferSubData = i++;
|
||||
GLmethod.checkFramebufferStatus = i++;
|
||||
GLmethod.clear = i++;
|
||||
GLmethod.clearColor = i++;
|
||||
GLmethod.clearDepth = i++;
|
||||
GLmethod.clearStencil = i++;
|
||||
GLmethod.colorMask = i++; //20
|
||||
GLmethod.compileShader = i++;
|
||||
GLmethod.compressedTexImage2D = i++;
|
||||
GLmethod.compressedTexSubImage2D = i++;
|
||||
GLmethod.copyTexImage2D = i++;
|
||||
GLmethod.copyTexSubImage2D = i++;
|
||||
GLmethod.createBuffer = i++;
|
||||
GLmethod.createFramebuffer = i++;
|
||||
GLmethod.createProgram = i++;
|
||||
GLmethod.createRenderbuffer = i++;
|
||||
GLmethod.createShader = i++; //30
|
||||
GLmethod.createTexture = i++;
|
||||
GLmethod.cullFace = i++;
|
||||
GLmethod.deleteBuffer = i++;
|
||||
GLmethod.deleteFramebuffer = i++;
|
||||
GLmethod.deleteProgram = i++;
|
||||
GLmethod.deleteRenderbuffer = i++;
|
||||
GLmethod.deleteShader = i++;
|
||||
GLmethod.deleteTexture = i++;
|
||||
GLmethod.depthFunc = i++;
|
||||
GLmethod.depthMask = i++; //40
|
||||
GLmethod.depthRange = i++;
|
||||
GLmethod.detachShader = i++;
|
||||
GLmethod.disable = i++;
|
||||
GLmethod.disableVertexAttribArray = i++;
|
||||
GLmethod.drawArrays = i++;
|
||||
GLmethod.drawArraysInstancedANGLE = i++;
|
||||
GLmethod.drawElements = i++;
|
||||
GLmethod.drawElementsInstancedANGLE = i++;
|
||||
GLmethod.enable = i++;
|
||||
GLmethod.enableVertexAttribArray = i++; //50
|
||||
GLmethod.flush = i++;
|
||||
GLmethod.framebufferRenderbuffer = i++;
|
||||
GLmethod.framebufferTexture2D = i++;
|
||||
GLmethod.frontFace = i++;
|
||||
GLmethod.generateMipmap = i++;
|
||||
GLmethod.getActiveAttrib = i++;
|
||||
GLmethod.getActiveUniform = i++;
|
||||
GLmethod.getAttachedShaders = i++;
|
||||
GLmethod.getAttribLocation = i++;
|
||||
GLmethod.getBufferParameter = i++; //60
|
||||
GLmethod.getContextAttributes = i++;
|
||||
GLmethod.getError = i++;
|
||||
GLmethod.getExtension = i++;
|
||||
GLmethod.getFramebufferAttachmentParameter = i++;
|
||||
GLmethod.getParameter = i++;
|
||||
GLmethod.getProgramInfoLog = i++;
|
||||
GLmethod.getProgramParameter = i++;
|
||||
GLmethod.getRenderbufferParameter = i++;
|
||||
GLmethod.getShaderInfoLog = i++;
|
||||
GLmethod.getShaderParameter = i++; //70
|
||||
GLmethod.getShaderPrecisionFormat = i++;
|
||||
GLmethod.getShaderSource = i++;
|
||||
GLmethod.getSupportedExtensions = i++;
|
||||
GLmethod.getTexParameter = i++;
|
||||
GLmethod.getUniform = i++;
|
||||
GLmethod.getUniformLocation = i++;
|
||||
GLmethod.getVertexAttrib = i++;
|
||||
GLmethod.getVertexAttribOffset = i++;
|
||||
GLmethod.isBuffer = i++;
|
||||
GLmethod.isContextLost = i++; //80
|
||||
GLmethod.isEnabled = i++;
|
||||
GLmethod.isFramebuffer = i++;
|
||||
GLmethod.isProgram = i++;
|
||||
GLmethod.isRenderbuffer = i++;
|
||||
GLmethod.isShader = i++;
|
||||
GLmethod.isTexture = i++;
|
||||
GLmethod.lineWidth = i++;
|
||||
GLmethod.linkProgram = i++;
|
||||
GLmethod.pixelStorei = i++;
|
||||
GLmethod.polygonOffset = i++; //90
|
||||
GLmethod.readPixels = i++;
|
||||
GLmethod.renderbufferStorage = i++;
|
||||
GLmethod.sampleCoverage = i++;
|
||||
GLmethod.scissor = i++;
|
||||
GLmethod.shaderSource = i++;
|
||||
GLmethod.stencilFunc = i++;
|
||||
GLmethod.stencilFuncSeparate = i++;
|
||||
GLmethod.stencilMask = i++;
|
||||
GLmethod.stencilMaskSeparate = i++;
|
||||
GLmethod.stencilOp = i++; //100
|
||||
GLmethod.stencilOpSeparate = i++;
|
||||
GLmethod.texImage2D = i++;
|
||||
GLmethod.texParameterf = i++;
|
||||
GLmethod.texParameteri = i++;
|
||||
GLmethod.texSubImage2D = i++;
|
||||
GLmethod.uniform1f = i++;
|
||||
GLmethod.uniform1fv = i++;
|
||||
GLmethod.uniform1i = i++;
|
||||
GLmethod.uniform1iv = i++;
|
||||
GLmethod.uniform2f = i++; //110
|
||||
GLmethod.uniform2fv = i++;
|
||||
GLmethod.uniform2i = i++;
|
||||
GLmethod.uniform2iv = i++;
|
||||
GLmethod.uniform3f = i++;
|
||||
GLmethod.uniform3fv = i++;
|
||||
GLmethod.uniform3i = i++;
|
||||
GLmethod.uniform3iv = i++;
|
||||
GLmethod.uniform4f = i++;
|
||||
GLmethod.uniform4fv = i++;
|
||||
GLmethod.uniform4i = i++; //120
|
||||
GLmethod.uniform4iv = i++;
|
||||
GLmethod.uniformMatrix2fv = i++;
|
||||
GLmethod.uniformMatrix3fv = i++;
|
||||
GLmethod.uniformMatrix4fv = i++;
|
||||
GLmethod.useProgram = i++;
|
||||
GLmethod.validateProgram = i++;
|
||||
GLmethod.vertexAttrib1f = i++; //new
|
||||
GLmethod.vertexAttrib2f = i++; //new
|
||||
GLmethod.vertexAttrib3f = i++; //new
|
||||
GLmethod.vertexAttrib4f = i++; //new //130
|
||||
GLmethod.vertexAttrib1fv = i++; //new
|
||||
GLmethod.vertexAttrib2fv = i++; //new
|
||||
GLmethod.vertexAttrib3fv = i++; //new
|
||||
GLmethod.vertexAttrib4fv = i++; //new
|
||||
GLmethod.vertexAttribPointer = i++;
|
||||
GLmethod.viewport = i++;
|
||||
|
||||
export default GLmethod;
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 40 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const GLtype = {};
|
||||
|
||||
[
|
||||
"GLbitfield",
|
||||
"GLboolean",
|
||||
"GLbyte",
|
||||
"GLclampf",
|
||||
"GLenum",
|
||||
"GLfloat",
|
||||
"GLint",
|
||||
"GLintptr",
|
||||
"GLsizei",
|
||||
"GLsizeiptr",
|
||||
"GLshort",
|
||||
"GLubyte",
|
||||
"GLuint",
|
||||
"GLushort"
|
||||
].sort().map((typeName, i) => GLtype[typeName] = 1 >> (i + 1));
|
||||
|
||||
export default GLtype;
|
||||
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 40 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLProgram';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLProgram {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 0 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLRenderBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLRenderbuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6140 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLShader';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLShader {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 4 0 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default class WebGLShaderPrecisionFormat {
|
||||
className = 'WebGLShaderPrecisionFormat';
|
||||
|
||||
constructor({
|
||||
rangeMin, rangeMax, precision
|
||||
}) {
|
||||
this.rangeMin = rangeMin;
|
||||
this.rangeMax = rangeMax;
|
||||
this.precision = precision;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 407 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLTexture';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLTexture {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 4 07 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLUniformLocation';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLUniformLocation {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export function getTransferedObjectUUID(name, id) {
|
||||
return `${name.toLowerCase()}-${id}`;
|
||||
}
|
||||
75
components/firstui/fui-autograph/gcanvas/env/canvas.js
vendored
Normal file
75
components/firstui/fui-autograph/gcanvas/env/canvas.js
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1 40 7 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import GContext2D from '../context-2d/RenderingContext';
|
||||
import GContextWebGL from '../context-webgl/RenderingContext';
|
||||
|
||||
export default class GCanvas {
|
||||
|
||||
// static GBridge = null;
|
||||
|
||||
id = null;
|
||||
|
||||
_needRender = true;
|
||||
|
||||
constructor(id, { disableAutoSwap }) {
|
||||
this.id = id;
|
||||
|
||||
this._disableAutoSwap = disableAutoSwap;
|
||||
if (disableAutoSwap) {
|
||||
this._swapBuffers = () => {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getContext(type) {
|
||||
|
||||
let context = null;
|
||||
|
||||
if (type.match(/webgl/i)) {
|
||||
context = new GContextWebGL(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
if (!this._disableAutoSwap) {
|
||||
const render = () => {
|
||||
if (this._needRender) {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
this._needRender = false;
|
||||
}
|
||||
}
|
||||
setInterval(render, 16);
|
||||
}
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
|
||||
} else if (type.match(/2d/i)) {
|
||||
context = new GContext2D(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
// const render = ( callback ) => {
|
||||
//
|
||||
// const commands = context._drawCommands;
|
||||
// context._drawCommands = '';
|
||||
//
|
||||
// GCanvas.GBridge.render2d(this.id, commands, callback);
|
||||
// this._needRender = false;
|
||||
// }
|
||||
// //draw方法触发
|
||||
// context._flush = render;
|
||||
// //setInterval(render, 16);
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 0);
|
||||
} else {
|
||||
throw new Error('not supported context ' + type);
|
||||
}
|
||||
|
||||
return context;
|
||||
|
||||
}
|
||||
|
||||
reset() {
|
||||
GCanvas.GBridge.callReset(this.id);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
97
components/firstui/fui-autograph/gcanvas/env/image.js
vendored
Normal file
97
components/firstui/fui-autograph/gcanvas/env/image.js
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
let incId = 1;
|
||||
|
||||
const noop = function () { };
|
||||
|
||||
class GImage {
|
||||
|
||||
static GBridge = null;
|
||||
|
||||
constructor() {
|
||||
this._id = incId++;
|
||||
this._width = 0;
|
||||
this._height = 0;
|
||||
this._src = undefined;
|
||||
this._onload = noop;
|
||||
this._onerror = noop;
|
||||
this.complete = false;
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this._width;
|
||||
}
|
||||
set width(v) {
|
||||
this._width = v;
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
set height(v) {
|
||||
this._height = v;
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this._src;
|
||||
}
|
||||
|
||||
set src(v) {
|
||||
|
||||
if (v.startsWith('//')) {
|
||||
v = 'http:' + v;
|
||||
}
|
||||
|
||||
this._src = v;
|
||||
|
||||
GImage.GBridge.perloadImage([this._src, this._id], (data) => {
|
||||
if (typeof data === 'string') {
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
if (data.error) {
|
||||
var evt = { type: 'error', target: this };
|
||||
this.onerror(evt);
|
||||
} else {
|
||||
this.complete = true;
|
||||
this.width = typeof data.width === 'number' ? data.width : 0;
|
||||
this.height = typeof data.height === 'number' ? data.height : 0;
|
||||
var evt = { type: 'load', target: this };
|
||||
this.onload(evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = listener;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = listener;
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = noop;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = noop;
|
||||
}
|
||||
}
|
||||
|
||||
get onload() {
|
||||
return this._onload;
|
||||
}
|
||||
|
||||
set onload(v) {
|
||||
this._onload = v;
|
||||
}
|
||||
|
||||
get onerror() {
|
||||
return this._onerror;
|
||||
}
|
||||
|
||||
set onerror(v) {
|
||||
this._onerror = v;
|
||||
}
|
||||
}
|
||||
|
||||
export default GImage;
|
||||
25
components/firstui/fui-autograph/gcanvas/env/tool.js
vendored
Normal file
25
components/firstui/fui-autograph/gcanvas/env/tool.js
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
|
||||
export function ArrayBufferToBase64 (buffer) {
|
||||
var binary = '';
|
||||
var bytes = new Uint8ClampedArray(buffer);
|
||||
for (var len = bytes.byteLength, i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
export function Base64ToUint8ClampedArray(base64String) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/\-/g, '+')
|
||||
.replace(/_/g, '/');
|
||||
|
||||
const rawData = atob(base64);
|
||||
const outputArray = new Uint8ClampedArray(rawData.length);
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
}
|
||||
48
components/firstui/fui-autograph/gcanvas/index.js
Normal file
48
components/firstui/fui-autograph/gcanvas/index.js
Normal file
@ -0,0 +1,48 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6140 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import GCanvas from './env/canvas';
|
||||
import GImage from './env/image';
|
||||
|
||||
import GWebGLRenderingContext from './context-webgl/RenderingContext';
|
||||
import GContext2D from './context-2d/RenderingContext';
|
||||
|
||||
import GBridgeWeex from './bridge/bridge-weex';
|
||||
|
||||
export let Image = GImage;
|
||||
|
||||
export let WeexBridge = GBridgeWeex;
|
||||
|
||||
export function enable(el, {
|
||||
bridge,
|
||||
debug,
|
||||
disableAutoSwap,
|
||||
disableComboCommands
|
||||
} = {}) {
|
||||
|
||||
const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
|
||||
|
||||
GBridge.callEnable(el.ref, [
|
||||
0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
|
||||
-1, // hybridLayerType: 0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
|
||||
false, // supportScroll
|
||||
false, // newCanvasMode
|
||||
1, // compatible
|
||||
'white', // clearColor
|
||||
false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
|
||||
]);
|
||||
|
||||
if (debug === true) {
|
||||
GBridge.callEnableDebug();
|
||||
}
|
||||
if (disableComboCommands) {
|
||||
GBridge.callEnableDisableCombo();
|
||||
}
|
||||
|
||||
var canvas = new GCanvas(el.ref, {
|
||||
disableAutoSwap
|
||||
});
|
||||
let pixelRatio = uni.getSystemInfoSync().pixelRatio;
|
||||
canvas.width = el.style.width * pixelRatio;
|
||||
canvas.height = el.style.height * pixelRatio;
|
||||
|
||||
return canvas;
|
||||
};
|
||||
242
components/firstui/fui-avatar/fui-avatar.vue
Normal file
242
components/firstui/fui-avatar/fui-avatar.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 140 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-avatar__wrap" :class="[width?'':'fui-avatar__size-'+size,radius===-1?'fui-avatar__'+shape:'']"
|
||||
:style="wrapStyles" @tap="handleClick">
|
||||
<image class="fui-avatar__img" :style="styles"
|
||||
:class="[radius===-1?'fui-avatar__'+shape:'',width?'':'fui-avatar__size-'+size]" :src="showImg" :mode="mode"
|
||||
v-if="src && src!==true" :webp="webp" :lazy-load="lazyLoad" @error="handleError"></image>
|
||||
<text class="fui-avatar__text" :class="[width?'':'fui-avatar__text-'+size]" v-if="!src && src!==true && text"
|
||||
:style="textStyles">{{text}}</text>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-avatar",
|
||||
emits: ['click', 'error'],
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
errorSrc: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'scaleToFill'
|
||||
},
|
||||
//微信小程序、百度小程序、字节跳动小程序
|
||||
//图片懒加载。只针对page与scroll-view下的image有效
|
||||
lazyLoad: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//默认不解析 webP 格式，只支持网络资源 微信小程序2.9.0
|
||||
webp: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#D1D1D1'
|
||||
},
|
||||
//small（64）、middle（96）、large（128）
|
||||
size: {
|
||||
type: String,
|
||||
default: 'middle'
|
||||
},
|
||||
//图片宽度，设置大于0的数值生效，默认使用size
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//默认等宽，设置图大于0的数值且设置了图片宽度生效
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//指定头像的形状，可选值为 circle、square
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
//图片圆角值，默认使用shape，当设置大于等于0的数值，shape失效
|
||||
radius: {
|
||||
type: [Number, String],
|
||||
default: -1
|
||||
},
|
||||
//没有src时可以使用文本代替
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//默认使用size下字体大小
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
fontWeight: {
|
||||
type: [Number, String],
|
||||
default: 600
|
||||
},
|
||||
marginRight: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
marginBottom: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//在列表中的索引值
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
//其他参数
|
||||
params: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let styles = '';
|
||||
if (this.width) {
|
||||
styles = `width:${this.width}rpx;height:${this.height || this.width}rpx;`
|
||||
}
|
||||
if (this.radius !== -1) {
|
||||
styles += `border-radius:${this.radius}rpx;`
|
||||
}
|
||||
return styles;
|
||||
},
|
||||
wrapStyles() {
|
||||
return `background:${this.background};margin-right:${this.marginRight}rpx;margin-bottom:${this.marginBottom}rpx;${this.styles};`
|
||||
},
|
||||
textStyles() {
|
||||
let styles = `color:${this.color};font-weight:${this.fontWeight};`;
|
||||
if (this.fontSize) {
|
||||
styles += `font-size:${this.fontSize}rpx;`
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src(val) {
|
||||
this.src && (this.showImg = this.src);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showImg: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.src && (this.showImg = this.src);
|
||||
},
|
||||
methods: {
|
||||
handleError(e) {
|
||||
if (this.src) {
|
||||
this.errorSrc && (this.showImg = this.errorSrc);
|
||||
this.$emit('error', {
|
||||
index: this.index,
|
||||
params: this.params
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClick() {
|
||||
this.$emit('click', {
|
||||
index: this.index,
|
||||
params: this.params
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-avatar__wrap {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
z-index: 3;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-avatar__img {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-avatar__text {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fui-avatar__size-small {
|
||||
width: 64rpx !important;
|
||||
height: 64rpx !important;
|
||||
|
||||
}
|
||||
|
||||
.fui-avatar__text-small {
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
.fui-avatar__size-middle {
|
||||
width: 96rpx !important;
|
||||
height: 96rpx !important;
|
||||
}
|
||||
|
||||
.fui-avatar__text-middle {
|
||||
font-size: 44rpx !important;
|
||||
}
|
||||
|
||||
.fui-avatar__size-large {
|
||||
width: 128rpx !important;
|
||||
height: 128rpx !important;
|
||||
}
|
||||
|
||||
.fui-avatar__text-large {
|
||||
font-size: 56rpx !important;
|
||||
}
|
||||
|
||||
.fui-avatar__circle {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-radius: 500px !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-radius: 50% !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-avatar__square {
|
||||
border-radius: 8rpx !important;
|
||||
}
|
||||
</style>
|
||||
179
components/firstui/fui-backdrop/fui-backdrop.vue
Normal file
179
components/firstui/fui-backdrop/fui-backdrop.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 40 7 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view ref="fui_bd_ani" class="fui-backdrop__wrap"
|
||||
:style="{background:background,position:absolute?'absolute':'fixed',width:absolute && full ?winWidth+'px':'100%',height:absolute && full ?winHeight+'px':'100%'}"
|
||||
@tap.stop="handleClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="fui-backdrop__wrap" :class="{'fui-backdrop__bg':!background,'fui-backdrop__show':show}"
|
||||
:style="{background:background,position:absolute?'absolute':'fixed',zIndex:zIndex}" @tap.stop="handleClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
export default {
|
||||
name: "fui-backdrop",
|
||||
emits: ['click'],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
// #ifdef APP-NVUE
|
||||
default: 'rgba(0, 0, 0, 0.6)',
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
default: ''
|
||||
// #endif
|
||||
},
|
||||
//是否绝对定位，默认固定定位fixed
|
||||
absolute: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//absolute定位且组件在根目录下时是否铺满屏幕,仅nvue有效
|
||||
full: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 980
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
watch: {
|
||||
show(val) {
|
||||
if (val) {
|
||||
this.openAni()
|
||||
} else {
|
||||
this.closeAni()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (this.show) {
|
||||
this._ani(true)
|
||||
} else {
|
||||
this._aniHidden(this.show)
|
||||
}
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
winWidth: 300,
|
||||
winHeight: 600
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let sys = uni.getSystemInfoSync()
|
||||
this.winWidth = sys.windowWidth
|
||||
this.winHeight = sys.windowHeight
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
openAni() {
|
||||
this._aniHidden(true, () => {
|
||||
this._ani(true)
|
||||
})
|
||||
},
|
||||
closeAni(type) {
|
||||
this._ani(false, () => {
|
||||
this._aniHidden(false)
|
||||
});
|
||||
},
|
||||
_ani(type, callback) {
|
||||
let styles = {
|
||||
opacity: type ? 1 : 0
|
||||
};
|
||||
if (!this.$refs['fui_bd_ani']) return;
|
||||
animation.transition(
|
||||
this.$refs['fui_bd_ani'].ref, {
|
||||
styles,
|
||||
duration: 200, //ms
|
||||
timingFunction: 'ease-in',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
},
|
||||
() => {
|
||||
callback && callback()
|
||||
}
|
||||
);
|
||||
},
|
||||
_aniHidden(isShow, callback) {
|
||||
if (!this.$refs['fui_bd_ani']) return;
|
||||
let styles = {
|
||||
transform: isShow ? 'translateX(0px)' : 'translateX(-1500px)'
|
||||
};
|
||||
animation.transition(
|
||||
this.$refs['fui_bd_ani'].ref, {
|
||||
styles,
|
||||
duration: 0,
|
||||
needLayout: false,
|
||||
delay: 0
|
||||
},
|
||||
() => {
|
||||
callback && callback()
|
||||
}
|
||||
);
|
||||
},
|
||||
// #endif
|
||||
handleClick() {
|
||||
if (this.closable && this.show) {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-backdrop__wrap {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* #ifdef APP-NVUE */
|
||||
opacity: 0.001;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-backdrop__bg {
|
||||
background: var(--fui-bg-color-mask, rgba(0, 0, 0, 0.6)) !important;
|
||||
}
|
||||
|
||||
.fui-backdrop__show {
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
132
components/firstui/fui-backtop/fui-backtop.vue
Normal file
132
components/firstui/fui-backtop/fui-backtop.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 407 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-backtop__wrap"
|
||||
:style="{width:width+'rpx',height:width+'rpx',borderRadius:isNvue?width+'rpx':'50%' ,bottom: bottom + 'rpx', right: right + 'rpx',background:background }"
|
||||
v-if="isShow && visible" @tap.stop="goBacktop">
|
||||
<fui-icon :name="name" :size="52" :color="color" v-if="!custom"></fui-icon>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom')
|
||||
// #endif
|
||||
//非easycom模式取消注释引入字体组件，按实际路径进行调整
|
||||
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
||||
export default {
|
||||
name: "fui-backtop",
|
||||
emits: ['click'],
|
||||
// components:{
|
||||
// fuiIcon
|
||||
// },
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: [Number, String]
|
||||
},
|
||||
targetRef: {
|
||||
type: [String, Object],
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
threshold: {
|
||||
type: [Number, String],
|
||||
default: 320
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 80
|
||||
},
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 160
|
||||
},
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: 40
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
custom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
scrollTop(newValue, oldValue) {
|
||||
this.scrollChange();
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false;
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true;
|
||||
// #endif
|
||||
return {
|
||||
isNvue: isNvue,
|
||||
isShow: false,
|
||||
visible: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goBacktop: function() {
|
||||
// #ifndef APP-NVUE
|
||||
//防止fixed元素先消失再显示
|
||||
this.visible = false;
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 120
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.visible = true;
|
||||
}, 220);
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
if (this.targetRef) {
|
||||
dom.scrollToElement(this.targetRef, {});
|
||||
}
|
||||
// #endif
|
||||
this.$emit('click', {})
|
||||
},
|
||||
scrollChange() {
|
||||
let show = this.scrollTop > this.threshold;
|
||||
if ((show && this.isShow) || (!show && !this.isShow)) return;
|
||||
this.isShow = show;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-backtop__wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
z-index: 888;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-shadow: 0 0 6px rgb(0 0 0 / 12%);
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
234
components/firstui/fui-badge/fui-badge.vue
Normal file
234
components/firstui/fui-badge/fui-badge.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<text
|
||||
:class="[dot?'fui-badge__dot':'fui-badge__wrap',background?'':('fui-badge__bg-'+type),absolute?'fui-badge__absolute':'',scaleRatio!=1 && isNvue?'fui-badge__trans-origin':'',!background && type==='white'?'fui-badge__text-color':'']"
|
||||
:style="{top:absolute?top:'auto',right:absolute?right:'auto',zoom:scaleRatio,transform:isNvue?`scale(${scaleRatio})`:'scale(1)',marginTop:marginTop+'rpx',marginLeft:marginLeft+'rpx',marginRight:marginRight+'rpx',width:width,color:color,background:getBgColor}"
|
||||
@tap="handleClick" v-if="showValue || dot">{{dot?'':showValue}}</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const sys = uni.getSystemInfoSync()
|
||||
export default {
|
||||
name: "fui-badge",
|
||||
emits: ['click'],
|
||||
props: {
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: -1
|
||||
},
|
||||
//类型：primary，success，warning，danger，purple，white
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
//背景色，如果设置背景则type失效
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
//是否显示为圆点
|
||||
dot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//margin-top值，单位rpx
|
||||
marginTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//margin-left值，单位rpx
|
||||
marginLeft: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//margin-right值，单位rpx
|
||||
marginRight: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//是否绝对定位
|
||||
absolute: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
top: {
|
||||
type: String,
|
||||
default: '-8rpx'
|
||||
},
|
||||
right: {
|
||||
type: String,
|
||||
default: '-18rpx'
|
||||
},
|
||||
//缩放比例
|
||||
scaleRatio: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false;
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true;
|
||||
// #endif
|
||||
return {
|
||||
isNvue: isNvue,
|
||||
width: 0,
|
||||
showValue: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getBgColor() {
|
||||
let color = this.background
|
||||
// #ifdef APP-NVUE
|
||||
if (!color && this.type) {
|
||||
//primary，success，warning，danger，purple，white
|
||||
const app = uni && uni.$fui && uni.$fui.color
|
||||
const colors = {
|
||||
primary: (app && app.primary) || '#465CFF',
|
||||
success: (app && app.success) || '#09BE4F',
|
||||
warning: (app && app.warning) || '#FFB703',
|
||||
danger: (app && app.danger) || '#FF2B2B',
|
||||
purple: (app && app.purple) || '#6831FF',
|
||||
white: '#FFFFFF'
|
||||
}
|
||||
color = colors[this.type] || colors.primary
|
||||
}
|
||||
// #endif
|
||||
return color
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.getWidth()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getWidth()
|
||||
},
|
||||
methods: {
|
||||
_getTextWidth(text) {
|
||||
let sum = 0;
|
||||
for (let i = 0, len = text.length; i < len; i++) {
|
||||
if (text.charCodeAt(i) >= 0 && text.charCodeAt(i) <= 255)
|
||||
sum = sum + 1;
|
||||
else
|
||||
sum = sum + 2;
|
||||
}
|
||||
const px = uni.upx2px(text.length > 1 ? 32 : 24)
|
||||
var strCode = text.charCodeAt();
|
||||
let multiplier = 12;
|
||||
if (strCode >= 65 && strCode <= 90) {
|
||||
multiplier = 15;
|
||||
}
|
||||
return (sum / 2 * multiplier) + px + 'px';
|
||||
},
|
||||
getWidth() {
|
||||
let max = Number(this.max)
|
||||
let val = Number(this.value)
|
||||
let value = ''
|
||||
if (isNaN(val) || max === -1) {
|
||||
value = this.value
|
||||
} else {
|
||||
value = val > max ? `${max}+` : val
|
||||
}
|
||||
this.showValue = value;
|
||||
this.width = this.dot ? '8px' : this._getTextWidth(String(value))
|
||||
},
|
||||
handleClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-badge__wrap {
|
||||
height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 100px;
|
||||
/* #ifndef APP-NVUE */
|
||||
min-width: 36rpx !important;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.fui-badge__dot {
|
||||
height: 8px !important;
|
||||
width: 8px !important;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-radius: 100px;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-block;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-radius: 50%;
|
||||
/* #endif */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-badge__bg-primary {
|
||||
background-color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
.fui-badge__bg-success {
|
||||
background-color: var(--fui-color-success, #09BE4F) !important;
|
||||
}
|
||||
|
||||
.fui-badge__bg-warning {
|
||||
background-color: var(--fui-color-warning, #FFB703) !important;
|
||||
}
|
||||
|
||||
.fui-badge__bg-danger {
|
||||
background-color: var(--fui-color-danger, #FF2B2B) !important;
|
||||
}
|
||||
|
||||
.fui-badge__bg-purple {
|
||||
background-color: var(--fui-color-purple, #6831FF) !important;
|
||||
}
|
||||
|
||||
.fui-badge__bg-white {
|
||||
background-color: var(--fui-color-white, #FFFFFF) !important;
|
||||
}
|
||||
|
||||
.fui-badge__text-color {
|
||||
color: var(--fui-color-danger, #FF2B2B) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-badge__text-color {
|
||||
color: #FF2B2B !important;
|
||||
}
|
||||
|
||||
.fui-badge__trans-origin {
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-badge__absolute {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
156
components/firstui/fui-banner-arc/fui-banner-arc.vue
Normal file
156
components/firstui/fui-banner-arc/fui-banner-arc.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 4 072 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-banner__arc-wrap" ref="fui_banner__arc"
|
||||
:style="{height:height+'rpx',marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}" @tap="handleClick">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="fui-banner__arc-inner"
|
||||
:style="{background:background,height:height+'rpx',width:width+'%',paddingLeft:(width-100)/2+'%',paddingRight:(width-100)/2+'%',left:'-'+(width-100)/2+'%'}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="fui-banner__arc-inner"
|
||||
:style="{background:background,height:width+'px',width:width+'px',paddingLeft:(width-bannerWidth)/2+'px',paddingRight:(width-bannerWidth)/2+'px',left:'-'+(width-bannerWidth)/2+'px'}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
// #endif
|
||||
export default {
|
||||
name: "fui-banner-arc",
|
||||
emits: ['click'],
|
||||
// #ifdef MP-WEIXIN
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
// #endif
|
||||
props: {
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
//圆弧view宽度与banner宽度比率，最小值 1.2:1
|
||||
ratio: {
|
||||
type: [Number, String],
|
||||
default: 1.2
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
marginTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
marginBottom: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
ratio(val) {
|
||||
// #ifdef APP-NVUE
|
||||
if (this.bannerWidth) {
|
||||
this.initArcWidth()
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.initArcWidth()
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef APP-NVUE
|
||||
width: 450,
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
width: 120,
|
||||
// #endif
|
||||
bannerWidth: 375
|
||||
};
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._getSize()
|
||||
}, 50)
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
created() {
|
||||
this.initArcWidth()
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
initArcWidth() {
|
||||
let ratio = Number(this.ratio || 0)
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
ratio = ratio < 1.5 ? 1.5 : ratio;
|
||||
let width = Math.ceil(this.bannerWidth * ratio)
|
||||
width = width % 2 === 0 ? width : width + 1;
|
||||
this.width = width;
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
ratio = ratio < 1.2 ? 1.2 : ratio;
|
||||
this.width = 100 * ratio;
|
||||
// #endif
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
_getSize() {
|
||||
dom.getComponentRect(this.$refs['fui_banner__arc'], (ret) => {
|
||||
const size = ret.size
|
||||
if (size) {
|
||||
this.bannerWidth = size.width
|
||||
this.initArcWidth()
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
handleClick() {
|
||||
this.$emit('click', {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-banner__arc-wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-banner__arc-inner {
|
||||
position: absolute;
|
||||
/* #ifndef APP-NVUE */
|
||||
top:0;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 50% 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
bottom: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 10000px;
|
||||
border-bottom-left-radius: 10000px;
|
||||
justify-content: flex-end;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
205
components/firstui/fui-barcode/barcode.js
Normal file
205
components/firstui/fui-barcode/barcode.js
Normal file
@ -0,0 +1,205 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 40725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
/*
|
||||
* Copyright (c) 2014 Johannes Mittendorfer (http://johannes-mittendorfer.com)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Version 2.1.1
|
||||
* Build 2014-10-07
|
||||
*/
|
||||
|
||||
var EAN13, pluginName;
|
||||
|
||||
pluginName = null;
|
||||
|
||||
"use strict";
|
||||
|
||||
EAN13 = (function() {
|
||||
EAN13.prototype.settings = {};
|
||||
|
||||
EAN13.prototype.init = function() {
|
||||
var checkDigit, code;
|
||||
if (this.number.length === 12) {
|
||||
checkDigit = this.generateCheckDigit(this.number);
|
||||
this.number += checkDigit;
|
||||
}
|
||||
if (this.number.length === 13) {
|
||||
if (this.validate()) {
|
||||
this.settings.onValid.call();
|
||||
} else {
|
||||
this.settings.onInvalid.call();
|
||||
}
|
||||
code = this.getCode();
|
||||
return this.draw(code);
|
||||
} else {
|
||||
return this.settings.onError.call();
|
||||
}
|
||||
};
|
||||
|
||||
EAN13.prototype.getCode = function() {
|
||||
var c_encoding, code, countries, i, parts, raw_number, x, y, z;
|
||||
x = ["0001101", "0011001", "0010011", "0111101", "0100011", "0110001", "0101111", "0111011", "0110111", "0001011"];
|
||||
y = ["0100111", "0110011", "0011011", "0100001", "0011101", "0111001", "0000101", "0010001", "0001001", "0010111"];
|
||||
z = ["1110010", "1100110", "1101100", "1000010", "1011100", "1001110", "1010000", "1000100", "1001000", "1110100"];
|
||||
countries = ["xxxxxx", "xxyxyy", "xxyyxy", "xxyyyx", "xyxxyy", "xyyxxy", "xyyyxx", "xyxyxy", "xyxyyx", "xyyxyx"];
|
||||
code = "";
|
||||
c_encoding = countries[parseInt(this.number.substr(0, 1), 10)].split("");
|
||||
raw_number = this.number.substr(1);
|
||||
parts = raw_number.split("");
|
||||
i = 0;
|
||||
while (i < 6) {
|
||||
if (c_encoding[i] === "x") {
|
||||
code += x[parts[i]];
|
||||
} else {
|
||||
code += y[parts[i]];
|
||||
}
|
||||
i++;
|
||||
}
|
||||
i = 6;
|
||||
while (i < 12) {
|
||||
code += z[parts[i]];
|
||||
i++;
|
||||
}
|
||||
return code;
|
||||
};
|
||||
|
||||
EAN13.prototype.clear = function(context) {
|
||||
return context.clearRect(0, 0, this.settings.width, this.settings.height);
|
||||
};
|
||||
|
||||
EAN13.prototype.draw = function(code) {
|
||||
var border_height, chars, context, height, i, item_width, layout, left, lines, offset, prefix, width, x, _i, _ref;
|
||||
layout = {
|
||||
prefix_offset: 0.06,
|
||||
font_stretch: 0.073,
|
||||
border_line_height_number: 0.9,
|
||||
border_line_height: 1,
|
||||
line_height: 0.9,
|
||||
font_size: 0.15,
|
||||
font_y: 1.03,
|
||||
text_offset: 4.5
|
||||
};
|
||||
width = (this.settings.prefix ? this.settings.width - (this.settings.width * layout.prefix_offset) : this.settings.width);
|
||||
if (this.settings.number) {
|
||||
border_height = layout.border_line_height_number * this.settings.height;
|
||||
height = layout.line_height * border_height;
|
||||
} else {
|
||||
border_height = layout.border_line_height * this.settings.height;
|
||||
height = border_height;
|
||||
}
|
||||
item_width = width / 95;
|
||||
if (this.ctx) {
|
||||
context = this.ctx;
|
||||
this.clear(context);
|
||||
context.setFillStyle(this.settings.color);
|
||||
left = this.settings.number && this.settings.prefix ? this.settings.width * layout.prefix_offset : 0;
|
||||
lines = code.split("");
|
||||
context.fillRect(left, 0, item_width, border_height);
|
||||
left = left + item_width * 2;
|
||||
context.fillRect(left, 0, item_width, border_height);
|
||||
left = left + item_width;
|
||||
i = 0;
|
||||
while (i < 42) {
|
||||
if (lines[i] === "1") {
|
||||
context.fillRect(left, 0, Math.floor(item_width) + 1, height);
|
||||
}
|
||||
left = left + item_width;
|
||||
i++;
|
||||
}
|
||||
left = left + item_width;
|
||||
context.fillRect(left, 0, item_width, border_height);
|
||||
left = left + item_width * 2;
|
||||
context.fillRect(left, 0, item_width, border_height);
|
||||
left = left + item_width * 2;
|
||||
i = 42;
|
||||
while (i < 84) {
|
||||
if (lines[i] === "1") {
|
||||
context.fillRect(left, 0, Math.floor(item_width) + 1, height);
|
||||
}
|
||||
left = left + item_width;
|
||||
i++;
|
||||
}
|
||||
context.fillRect(left, 0, item_width, border_height);
|
||||
left = left + item_width * 2;
|
||||
context.fillRect(left, 0, item_width, border_height);
|
||||
if (this.settings.number) {
|
||||
context.setFontSize(layout.font_size * height + "px monospace");
|
||||
prefix = this.number.substr(0, 1);
|
||||
if (this.settings.prefix) {
|
||||
context.fillText(prefix, 0, border_height * layout.font_y);
|
||||
}
|
||||
offset = item_width * layout.text_offset + (this.settings.prefix ? layout.prefix_offset * this.settings.width : 0);
|
||||
chars = this.number.substr(1, 6).split("");
|
||||
chars.forEach(function(value, key) {
|
||||
context.fillText(value, offset, border_height * layout.font_y);
|
||||
return offset += layout.font_stretch * width;
|
||||
});
|
||||
offset = 49 * item_width + (this.settings.prefix ? layout.prefix_offset * this.settings.width : 0) + layout.text_offset;
|
||||
chars = this.number.substr(7).split("")
|
||||
chars.forEach(function(value, key) {
|
||||
context.fillText(value, offset, border_height * layout.font_y);
|
||||
return offset += layout.font_stretch * width;
|
||||
});
|
||||
}
|
||||
if (this.settings.debug) {
|
||||
for (x = _i = 0, _ref = item_width * 2; _ref > 0 ? _i <= width : _i >= width; x = _i += _ref) {
|
||||
context.beginPath();
|
||||
context.rect(x, height * 0.4, item_width, height * 0.1);
|
||||
context.setFillStyle('red');
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
context.draw()
|
||||
return this.settings.onSuccess.call();
|
||||
} else {
|
||||
return this.settings.onError.call();
|
||||
}
|
||||
};
|
||||
|
||||
EAN13.prototype.generateCheckDigit = function(number) {
|
||||
var chars, counter;
|
||||
counter = 0;
|
||||
chars = number.split("");
|
||||
chars.forEach(function(value, key) {
|
||||
if (key % 2 === 0) {
|
||||
return counter += parseInt(value, 10);
|
||||
} else {
|
||||
return counter += 3 * parseInt(value, 10);
|
||||
}
|
||||
});
|
||||
return 10 - (counter % 10) % 10;
|
||||
};
|
||||
|
||||
EAN13.prototype.validate = function() {
|
||||
return parseInt(this.number.slice(-1), 10) === this.generateCheckDigit(this.number.slice(0, -1));
|
||||
};
|
||||
|
||||
function EAN13(number, options, ctx) {
|
||||
var option;
|
||||
this.number = number;
|
||||
this.ctx = ctx
|
||||
this.settings = {
|
||||
width: 200,
|
||||
height: 100,
|
||||
number: true,
|
||||
prefix: true,
|
||||
color: "black",
|
||||
debug: false,
|
||||
onValid: function() {},
|
||||
onInvalid: function() {},
|
||||
onSuccess: function() {},
|
||||
onError: function() {}
|
||||
};
|
||||
if (options) {
|
||||
for (option in options) {
|
||||
this.settings[option] = options[option];
|
||||
}
|
||||
}
|
||||
this._name = pluginName;
|
||||
this.init();
|
||||
}
|
||||
|
||||
return EAN13;
|
||||
|
||||
})();
|
||||
|
||||
export default EAN13;
|
||||
142
components/firstui/fui-barcode/fui-barcode.vue
Normal file
142
components/firstui/fui-barcode/fui-barcode.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61407 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<gcanvas @longpress="longtap" @touchstart="touchstart" @touchend="touchend" :ref="canvasId"
|
||||
:style="{ width: w + 'px', height:h + 'px' }">
|
||||
</gcanvas>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-NVUE || MP-QQ -->
|
||||
<canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
|
||||
@touchstart="touchstart" @touchend="touchend" v-if="canvasId"></canvas>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-QQ -->
|
||||
<canvas canvas-id="canvas_barcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" @touchstart="touchstart"
|
||||
@touchend="touchend"></canvas>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import barcode from './barcode.js'
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
import {
|
||||
enable,
|
||||
WeexBridge
|
||||
} from './gcanvas/index.js';
|
||||
// #endif
|
||||
const defalutOptions = {
|
||||
number: true,
|
||||
prefix: true,
|
||||
color: '#181818',
|
||||
debug: false,
|
||||
onValid() {},
|
||||
onInvalid() {},
|
||||
onSuccess() {},
|
||||
onError() {}
|
||||
}
|
||||
// #ifdef MP-WEIXIN
|
||||
const canvasId = `fui_bc_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-QQ
|
||||
const canvasId = 'canvas_barcode'
|
||||
// #endif
|
||||
export default {
|
||||
name: "fui-barcode",
|
||||
emits: ['ready', 'longclick', 'touchStart', 'touchEnd'],
|
||||
props: {
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 480
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 200
|
||||
},
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// #ifndef MP-WEIXIN || MP-QQ
|
||||
const canvasId = `fui_bc_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
// #endif
|
||||
return {
|
||||
canvasId,
|
||||
defalutOptions,
|
||||
w: 240,
|
||||
h: 100
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
width(val) {
|
||||
this.w = uni.upx2px(val || 480)
|
||||
},
|
||||
height(val) {
|
||||
this.h = uni.upx2px(val || 200)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.w = uni.upx2px(this.width || 480)
|
||||
this.h = uni.upx2px(this.height || 200)
|
||||
this.ctx = null;
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$emit('ready', {
|
||||
canvasId: this.canvasId
|
||||
})
|
||||
}, 50)
|
||||
});
|
||||
},
|
||||
// #ifndef VUE3
|
||||
beforeDestroy() {
|
||||
this.ctx = null;
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
beforeUnmount() {
|
||||
this.ctx = null;
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
draw(options = {}) {
|
||||
if (!this.ctx) {
|
||||
// #ifdef APP-NVUE
|
||||
let ganvas = this.$refs[this.canvasId];
|
||||
/*通过元素引用获取canvas对象*/
|
||||
let canvasObj = enable(ganvas, {
|
||||
bridge: WeexBridge
|
||||
});
|
||||
/*获取绘图所需的上下文，暂不支持3d*/
|
||||
this.ctx = canvasObj.getContext('2d');
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
this.ctx = uni.createCanvasContext(this.canvasId, this)
|
||||
// #endif
|
||||
}
|
||||
const opts = Object.assign({}, this.defalutOptions, options)
|
||||
new barcode(String(this.value), Object.assign({
|
||||
width: this.w,
|
||||
height: this.h
|
||||
}, opts), this.ctx)
|
||||
},
|
||||
longtap() {
|
||||
this.$emit('longclick', {})
|
||||
},
|
||||
touchstart() {
|
||||
this.$emit('touchStart', {})
|
||||
},
|
||||
touchend() {
|
||||
this.$emit('touchEnd', {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
242
components/firstui/fui-barcode/gcanvas/bridge/bridge-weex.js
Normal file
242
components/firstui/fui-barcode/gcanvas/bridge/bridge-weex.js
Normal file
@ -0,0 +1,242 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61407 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const isWeex = typeof WXEnvironment !== 'undefined';
|
||||
const isWeexIOS = isWeex && /ios/i.test(WXEnvironment.platform);
|
||||
const isWeexAndroid = isWeex && !isWeexIOS;
|
||||
|
||||
import GLmethod from '../context-webgl/GLmethod';
|
||||
|
||||
const GCanvasModule =
|
||||
(typeof weex !== 'undefined' && weex.requireModule) ? (weex.requireModule('gcanvas')) :
|
||||
(typeof __weex_require__ !== 'undefined') ? (__weex_require__('@weex-module/gcanvas')) : {};
|
||||
|
||||
let isDebugging = false;
|
||||
|
||||
let isComboDisabled = false;
|
||||
|
||||
const logCommand = (function () {
|
||||
const methodQuery = [];
|
||||
Object.keys(GLmethod).forEach(key => {
|
||||
methodQuery[GLmethod[key]] = key;
|
||||
})
|
||||
const queryMethod = (id) => {
|
||||
return methodQuery[parseInt(id)] || 'NotFoundMethod';
|
||||
}
|
||||
const logCommand = (id, cmds) => {
|
||||
const mId = cmds.split(',')[0];
|
||||
const mName = queryMethod(mId);
|
||||
console.log(`=== callNative - componentId:${id}; method: ${mName}; cmds: ${cmds}`);
|
||||
}
|
||||
return logCommand;
|
||||
})();
|
||||
|
||||
function joinArray(arr, sep) {
|
||||
let res = '';
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (i !== 0) {
|
||||
res += sep;
|
||||
}
|
||||
res += arr[i];
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
const commandsCache = {}
|
||||
|
||||
const GBridge = {
|
||||
|
||||
callEnable: (ref, configArray) => {
|
||||
|
||||
commandsCache[ref] = [];
|
||||
|
||||
return GCanvasModule.enable({
|
||||
componentId: ref,
|
||||
config: configArray
|
||||
});
|
||||
},
|
||||
|
||||
callEnableDebug: () => {
|
||||
isDebugging = true;
|
||||
},
|
||||
|
||||
callEnableDisableCombo: () => {
|
||||
isComboDisabled = true;
|
||||
},
|
||||
|
||||
callSetContextType: function (componentId, context_type) {
|
||||
GCanvasModule.setContextType(context_type, componentId);
|
||||
},
|
||||
|
||||
callReset: function(id){
|
||||
GCanvasModule.resetComponent && canvasModule.resetComponent(componentId);
|
||||
},
|
||||
|
||||
render: isWeexIOS ? function (componentId) {
|
||||
return GCanvasModule.extendCallNative({
|
||||
contextId: componentId,
|
||||
type: 0x60000001
|
||||
});
|
||||
} : function (componentId) {
|
||||
return callGCanvasLinkNative(componentId, 0x60000001, 'render');
|
||||
},
|
||||
|
||||
render2d: isWeexIOS ? function (componentId, commands, callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
GCanvasModule.render([commands, callback?true:false], componentId, callback);
|
||||
|
||||
} : function (componentId, commands,callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
callGCanvasLinkNative(componentId, 0x20000001, commands);
|
||||
if(callback){
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
callExtendCallNative: isWeexIOS ? function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
} : function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
},
|
||||
|
||||
|
||||
flushNative: isWeexIOS ? function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = GCanvasModule.extendCallNative({
|
||||
"contextId": componentId,
|
||||
"type": 0x60000000,
|
||||
"args": cmdArgs
|
||||
});
|
||||
|
||||
const res = result && result.result;
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + res);
|
||||
}
|
||||
|
||||
return res;
|
||||
|
||||
} : function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = callGCanvasLinkNative(componentId, 0x60000000, cmdArgs);
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + result);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
callNative: function (componentId, cmdArgs, cache) {
|
||||
|
||||
if (isDebugging) {
|
||||
logCommand(componentId, cmdArgs);
|
||||
}
|
||||
|
||||
commandsCache[componentId].push(cmdArgs);
|
||||
|
||||
if (!cache || isComboDisabled) {
|
||||
return GBridge.flushNative(componentId);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
|
||||
texImage2D(componentId, ...args) {
|
||||
if (isWeexIOS) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 6 + ',' + target + ',' + level + ',' + internalformat + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 9 + ',' + target + ',' + level + ',' + internalformat + ',' + width + ',' + height + ',' + border + ',' +
|
||||
+ format + ',' + type + ',' + (image ? image.src : 0)
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, format, type, image.src);
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, width, height, border, format, type, (image ? image.src : 0));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image) {
|
||||
if (isWeexIOS) {
|
||||
if (arguments.length === 8) {
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texSubImage2D + ',' + 6 + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset, + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
GCanvasModule.texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image.src);
|
||||
}
|
||||
},
|
||||
|
||||
bindImageTexture(componentId, src, imageId) {
|
||||
GCanvasModule.bindImageTexture([src, imageId], componentId);
|
||||
},
|
||||
|
||||
perloadImage([url, id], callback) {
|
||||
GCanvasModule.preLoadImage([url, id], function (image) {
|
||||
image.url = url;
|
||||
image.id = id;
|
||||
callback(image);
|
||||
});
|
||||
},
|
||||
|
||||
measureText(text, fontStyle, componentId) {
|
||||
return GCanvasModule.measureText([text, fontStyle], componentId);
|
||||
},
|
||||
|
||||
getImageData (componentId, x, y, w, h, callback) {
|
||||
GCanvasModule.getImageData([x, y,w,h],componentId,callback);
|
||||
},
|
||||
|
||||
putImageData (componentId, data, x, y, w, h, callback) {
|
||||
GCanvasModule.putImageData([x, y,w,h,data],componentId,callback);
|
||||
},
|
||||
|
||||
toTempFilePath(componentId, x, y, width, height, destWidth, destHeight, fileType, quality, callback){
|
||||
GCanvasModule.toTempFilePath([x, y, width,height, destWidth, destHeight, fileType, quality], componentId, callback);
|
||||
}
|
||||
}
|
||||
|
||||
export default GBridge;
|
||||
@ -0,0 +1,19 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 407 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStyleLinearGradient {
|
||||
|
||||
constructor(x0, y0, x1, y1) {
|
||||
this._start_pos = { _x: x0, _y: y0 };
|
||||
this._end_pos = { _x: x1, _y: y1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop = function (pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleLinearGradient;
|
||||
@ -0,0 +1,9 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStylePattern {
|
||||
constructor(img, pattern) {
|
||||
this._style = pattern;
|
||||
this._img = img;
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStylePattern;
|
||||
@ -0,0 +1,18 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 07 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStyleRadialGradient {
|
||||
constructor(x0, y0, r0, x1, y1, r1) {
|
||||
this._start_pos = { _x: x0, _y: y0, _r: r0 };
|
||||
this._end_pos = { _x: x1, _y: y1, _r: r1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop(pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleRadialGradient;
|
||||
@ -0,0 +1,667 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 40725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import FillStylePattern from './FillStylePattern';
|
||||
import FillStyleLinearGradient from './FillStyleLinearGradient';
|
||||
import FillStyleRadialGradient from './FillStyleRadialGradient';
|
||||
import GImage from '../env/image.js';
|
||||
import {
|
||||
ArrayBufferToBase64,
|
||||
Base64ToUint8ClampedArray
|
||||
} from '../env/tool.js';
|
||||
|
||||
export default class CanvasRenderingContext2D {
|
||||
|
||||
_drawCommands = '';
|
||||
|
||||
_globalAlpha = 1.0;
|
||||
|
||||
_fillStyle = 'rgb(0,0,0)';
|
||||
_strokeStyle = 'rgb(0,0,0)';
|
||||
|
||||
_lineWidth = 1;
|
||||
_lineCap = 'butt';
|
||||
_lineJoin = 'miter';
|
||||
|
||||
_miterLimit = 10;
|
||||
|
||||
_globalCompositeOperation = 'source-over';
|
||||
|
||||
_textAlign = 'start';
|
||||
_textBaseline = 'alphabetic';
|
||||
|
||||
_font = '10px sans-serif';
|
||||
|
||||
_savedGlobalAlpha = [];
|
||||
|
||||
timer = null;
|
||||
componentId = null;
|
||||
|
||||
_notCommitDrawImageCache = [];
|
||||
_needRedrawImageCache = [];
|
||||
_redrawCommands = '';
|
||||
_autoSaveContext = true;
|
||||
// _imageMap = new GHashMap();
|
||||
// _textureMap = new GHashMap();
|
||||
|
||||
constructor() {
|
||||
this.className = 'CanvasRenderingContext2D';
|
||||
//this.save()
|
||||
}
|
||||
|
||||
setFillStyle(value) {
|
||||
this.fillStyle = value;
|
||||
}
|
||||
|
||||
set fillStyle(value) {
|
||||
this._fillStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("F" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
const image = value._img;
|
||||
if (!image.complete) {
|
||||
image.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
|
||||
//CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get fillStyle() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
|
||||
get globalAlpha() {
|
||||
return this._globalAlpha;
|
||||
}
|
||||
|
||||
setGlobalAlpha(value) {
|
||||
this.globalAlpha = value;
|
||||
}
|
||||
|
||||
set globalAlpha(value) {
|
||||
this._globalAlpha = value;
|
||||
this._drawCommands = this._drawCommands.concat("a" + value.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
|
||||
get strokeStyle() {
|
||||
return this._strokeStyle;
|
||||
}
|
||||
|
||||
setStrokeStyle(value) {
|
||||
this.strokeStyle = value;
|
||||
}
|
||||
|
||||
set strokeStyle(value) {
|
||||
|
||||
this._strokeStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("S" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y + ",".toFixed(2) + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get lineWidth() {
|
||||
return this._lineWidth;
|
||||
}
|
||||
|
||||
setLineWidth(value) {
|
||||
this.lineWidth = value;
|
||||
}
|
||||
|
||||
set lineWidth(value) {
|
||||
this._lineWidth = value;
|
||||
this._drawCommands = this._drawCommands.concat("W" + value + ";");
|
||||
}
|
||||
|
||||
get lineCap() {
|
||||
return this._lineCap;
|
||||
}
|
||||
|
||||
setLineCap(value) {
|
||||
this.lineCap = value;
|
||||
}
|
||||
|
||||
set lineCap(value) {
|
||||
this._lineCap = value;
|
||||
this._drawCommands = this._drawCommands.concat("C" + value + ";");
|
||||
}
|
||||
|
||||
get lineJoin() {
|
||||
return this._lineJoin;
|
||||
}
|
||||
|
||||
setLineJoin(value) {
|
||||
this.lineJoin = value
|
||||
}
|
||||
|
||||
set lineJoin(value) {
|
||||
this._lineJoin = value;
|
||||
this._drawCommands = this._drawCommands.concat("J" + value + ";");
|
||||
}
|
||||
|
||||
get miterLimit() {
|
||||
return this._miterLimit;
|
||||
}
|
||||
|
||||
setMiterLimit(value) {
|
||||
this.miterLimit = value
|
||||
}
|
||||
|
||||
set miterLimit(value) {
|
||||
this._miterLimit = value;
|
||||
this._drawCommands = this._drawCommands.concat("M" + value + ";");
|
||||
}
|
||||
|
||||
get globalCompositeOperation() {
|
||||
return this._globalCompositeOperation;
|
||||
}
|
||||
|
||||
set globalCompositeOperation(value) {
|
||||
|
||||
this._globalCompositeOperation = value;
|
||||
let mode = 0;
|
||||
switch (value) {
|
||||
case "source-over":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-atop":
|
||||
mode = 5;
|
||||
break;
|
||||
case "source-in":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-out":
|
||||
mode = 2;
|
||||
break;
|
||||
case "destination-over":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-atop":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-in":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-out":
|
||||
mode = 3;
|
||||
break;
|
||||
case "lighter":
|
||||
mode = 1;
|
||||
break;
|
||||
case "copy":
|
||||
mode = 2;
|
||||
break;
|
||||
case "xor":
|
||||
mode = 6;
|
||||
break;
|
||||
default:
|
||||
mode = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("B" + mode + ";");
|
||||
}
|
||||
|
||||
get textAlign() {
|
||||
return this._textAlign;
|
||||
}
|
||||
|
||||
setTextAlign(value) {
|
||||
this.textAlign = value
|
||||
}
|
||||
|
||||
set textAlign(value) {
|
||||
|
||||
this._textAlign = value;
|
||||
let Align = 0;
|
||||
switch (value) {
|
||||
case "start":
|
||||
Align = 0;
|
||||
break;
|
||||
case "end":
|
||||
Align = 1;
|
||||
break;
|
||||
case "left":
|
||||
Align = 2;
|
||||
break;
|
||||
case "center":
|
||||
Align = 3;
|
||||
break;
|
||||
case "right":
|
||||
Align = 4;
|
||||
break;
|
||||
default:
|
||||
Align = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("A" + Align + ";");
|
||||
}
|
||||
|
||||
get textBaseline() {
|
||||
return this._textBaseline;
|
||||
}
|
||||
|
||||
setTextBaseline(value) {
|
||||
this.textBaseline = value
|
||||
}
|
||||
|
||||
set textBaseline(value) {
|
||||
this._textBaseline = value;
|
||||
let baseline = 0;
|
||||
switch (value) {
|
||||
case "alphabetic":
|
||||
baseline = 0;
|
||||
break;
|
||||
case "middle":
|
||||
baseline = 1;
|
||||
break;
|
||||
case "top":
|
||||
baseline = 2;
|
||||
break;
|
||||
case "hanging":
|
||||
baseline = 3;
|
||||
break;
|
||||
case "bottom":
|
||||
baseline = 4;
|
||||
break;
|
||||
case "ideographic":
|
||||
baseline = 5;
|
||||
break;
|
||||
default:
|
||||
baseline = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("E" + baseline + ";");
|
||||
}
|
||||
|
||||
get font() {
|
||||
return this._font;
|
||||
}
|
||||
|
||||
setFontSize(size) {
|
||||
var str = this._font;
|
||||
var strs = str.trim().split(/\s+/);
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
var values = ["normal", "italic", "oblique", "normal", "small-caps", "normal", "bold",
|
||||
"bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900",
|
||||
"normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
|
||||
"semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
|
||||
];
|
||||
|
||||
if (-1 == values.indexOf(strs[i].trim())) {
|
||||
if (typeof size === 'string') {
|
||||
strs[i] = size;
|
||||
} else if (typeof size === 'number') {
|
||||
strs[i] = String(size) + 'px';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.font = strs.join(" ");
|
||||
}
|
||||
|
||||
set font(value) {
|
||||
this._font = value;
|
||||
this._drawCommands = this._drawCommands.concat("j" + value + ";");
|
||||
}
|
||||
|
||||
setTransform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("t" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
transform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("f" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx + "," + ty + ";");
|
||||
}
|
||||
|
||||
resetTransform() {
|
||||
this._drawCommands = this._drawCommands.concat("m;");
|
||||
}
|
||||
|
||||
scale(a, d) {
|
||||
this._drawCommands = this._drawCommands.concat("k" + a.toFixed(2) + "," +
|
||||
d.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
rotate(angle) {
|
||||
this._drawCommands = this._drawCommands
|
||||
.concat("r" + angle.toFixed(6) + ";");
|
||||
}
|
||||
|
||||
translate(tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("l" + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
save() {
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._drawCommands = this._drawCommands.concat("v;");
|
||||
}
|
||||
|
||||
restore() {
|
||||
this._drawCommands = this._drawCommands.concat("e;");
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
}
|
||||
|
||||
createPattern(img, pattern) {
|
||||
if (typeof img === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = img;
|
||||
img = imgObj;
|
||||
}
|
||||
return new FillStylePattern(img, pattern);
|
||||
}
|
||||
|
||||
createLinearGradient(x0, y0, x1, y1) {
|
||||
return new FillStyleLinearGradient(x0, y0, x1, y1);
|
||||
}
|
||||
|
||||
createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
|
||||
return new FillStyleRadialGradient(x0, y0, r0, x1, y1, r1);
|
||||
};
|
||||
|
||||
createCircularGradient = function(x0, y0, r0) {
|
||||
return new FillStyleRadialGradient(x0, y0, 0, x0, y0, r0);
|
||||
};
|
||||
|
||||
strokeRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("s" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
|
||||
clearRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("c" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
clip() {
|
||||
this._drawCommands = this._drawCommands.concat("p;");
|
||||
}
|
||||
|
||||
resetClip() {
|
||||
this._drawCommands = this._drawCommands.concat("q;");
|
||||
}
|
||||
|
||||
closePath() {
|
||||
this._drawCommands = this._drawCommands.concat("o;");
|
||||
}
|
||||
|
||||
moveTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("g" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
lineTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("i" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
quadraticCurveTo = function(cpx, cpy, x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("u" + cpx + "," + cpy + "," + x + "," + y + ";");
|
||||
}
|
||||
|
||||
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, ) {
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"z" + cp1x.toFixed(2) + "," + cp1y.toFixed(2) + "," + cp2x.toFixed(2) + "," + cp2y.toFixed(2) + "," +
|
||||
x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
arcTo(x1, y1, x2, y2, radius) {
|
||||
this._drawCommands = this._drawCommands.concat("h" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + radius + ";");
|
||||
}
|
||||
|
||||
beginPath() {
|
||||
this._drawCommands = this._drawCommands.concat("b;");
|
||||
}
|
||||
|
||||
|
||||
fillRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("n" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
rect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("w" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
fill() {
|
||||
this._drawCommands = this._drawCommands.concat("L;");
|
||||
}
|
||||
|
||||
stroke(path) {
|
||||
this._drawCommands = this._drawCommands.concat("x;");
|
||||
}
|
||||
|
||||
arc(x, y, radius, startAngle, endAngle, anticlockwise) {
|
||||
|
||||
let ianticlockwise = 0;
|
||||
if (anticlockwise) {
|
||||
ianticlockwise = 1;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"y" + x.toFixed(2) + "," + y.toFixed(2) + "," +
|
||||
radius.toFixed(2) + "," + startAngle + "," + endAngle + "," + ianticlockwise +
|
||||
";"
|
||||
);
|
||||
}
|
||||
|
||||
fillText(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("T" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
strokeText = function(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("U" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
measureText(text) {
|
||||
return CanvasRenderingContext2D.GBridge.measureText(text, this.font, this.componentId);
|
||||
}
|
||||
|
||||
isPointInPath = function(x, y) {
|
||||
throw new Error('GCanvas not supported yet');
|
||||
}
|
||||
|
||||
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
if (typeof image === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = image;
|
||||
image = imgObj;
|
||||
}
|
||||
if (image instanceof GImage) {
|
||||
if (!image.complete) {
|
||||
imgObj.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
var srcArgs = [image, sx, sy, sw, sh, dx, dy, dw, dh];
|
||||
var args = [];
|
||||
for (var arg in srcArgs) {
|
||||
if (typeof(srcArgs[arg]) != 'undefined') {
|
||||
args.push(srcArgs[arg]);
|
||||
}
|
||||
}
|
||||
this.__drawImage.apply(this, args);
|
||||
//this.__drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh);
|
||||
}
|
||||
}
|
||||
|
||||
__drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
const numArgs = arguments.length;
|
||||
|
||||
function drawImageCommands() {
|
||||
|
||||
if (numArgs === 3) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + image.width + "," + image.height + ";");
|
||||
} else if (numArgs === 5) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
const width = parseInt(sw) || image.width;
|
||||
const height = parseInt(sh) || image.height;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + width + "," + height + ";");
|
||||
} else if (numArgs === 9) {
|
||||
sx = parseFloat(sx) || 0.0;
|
||||
sy = parseFloat(sy) || 0.0;
|
||||
sw = parseInt(sw) || image.width;
|
||||
sh = parseInt(sh) || image.height;
|
||||
dx = parseFloat(dx) || 0.0;
|
||||
dy = parseFloat(dy) || 0.0;
|
||||
dw = parseInt(dw) || image.width;
|
||||
dh = parseInt(dh) || image.height;
|
||||
|
||||
return ("d" + image._id + "," +
|
||||
sx + "," + sy + "," + sw + "," + sh + "," +
|
||||
dx + "," + dy + "," + dw + "," + dh + ";");
|
||||
}
|
||||
}
|
||||
this._drawCommands += drawImageCommands();
|
||||
}
|
||||
|
||||
_flush(reserve, callback) {
|
||||
const commands = this._drawCommands;
|
||||
this._drawCommands = '';
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
this._needRender = false;
|
||||
}
|
||||
|
||||
_redrawflush(reserve, callback) {
|
||||
const commands = this._redrawCommands;
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
if (this._needRedrawImageCache.length == 0) {
|
||||
this._redrawCommands = '';
|
||||
}
|
||||
}
|
||||
|
||||
draw(reserve, callback) {
|
||||
if (!reserve) {
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._redrawCommands = this._drawCommands;
|
||||
this._needRedrawImageCache = this._notCommitDrawImageCache;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
} else {
|
||||
this._drawCommands = ("e;X;v;" + this._drawCommands);
|
||||
}
|
||||
} else {
|
||||
this._needRedrawImageCache = this._needRedrawImageCache.concat(this._notCommitDrawImageCache);
|
||||
this._redrawCommands += this._drawCommands;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache = [];
|
||||
if (this._flush) {
|
||||
this._flush(reserve, callback);
|
||||
}
|
||||
}
|
||||
|
||||
getImageData(x, y, w, h, callback) {
|
||||
CanvasRenderingContext2D.GBridge.getImageData(this.componentId, x, y, w, h, function(res) {
|
||||
res.data = Base64ToUint8ClampedArray(res.data);
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
putImageData(data, x, y, w, h, callback) {
|
||||
if (data instanceof Uint8ClampedArray) {
|
||||
data = ArrayBufferToBase64(data);
|
||||
CanvasRenderingContext2D.GBridge.putImageData(this.componentId, data, x, y, w, h, function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toTempFilePath(x, y, width, height, destWidth, destHeight, fileType, quality, callback) {
|
||||
CanvasRenderingContext2D.GBridge.toTempFilePath(this.componentId, x, y, width, height, destWidth, destHeight,
|
||||
fileType, quality,
|
||||
function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 140 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default class WebGLActiveInfo {
|
||||
className = 'WebGLActiveInfo';
|
||||
|
||||
constructor({
|
||||
type, name, size
|
||||
}) {
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.size = size;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 40 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLBuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLFrameBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLFramebuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
299
components/firstui/fui-barcode/gcanvas/context-webgl/GLenum.js
Normal file
299
components/firstui/fui-barcode/gcanvas/context-webgl/GLenum.js
Normal file
@ -0,0 +1,299 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 40 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default {
|
||||
"DEPTH_BUFFER_BIT": 256,
|
||||
"STENCIL_BUFFER_BIT": 1024,
|
||||
"COLOR_BUFFER_BIT": 16384,
|
||||
"POINTS": 0,
|
||||
"LINES": 1,
|
||||
"LINE_LOOP": 2,
|
||||
"LINE_STRIP": 3,
|
||||
"TRIANGLES": 4,
|
||||
"TRIANGLE_STRIP": 5,
|
||||
"TRIANGLE_FAN": 6,
|
||||
"ZERO": 0,
|
||||
"ONE": 1,
|
||||
"SRC_COLOR": 768,
|
||||
"ONE_MINUS_SRC_COLOR": 769,
|
||||
"SRC_ALPHA": 770,
|
||||
"ONE_MINUS_SRC_ALPHA": 771,
|
||||
"DST_ALPHA": 772,
|
||||
"ONE_MINUS_DST_ALPHA": 773,
|
||||
"DST_COLOR": 774,
|
||||
"ONE_MINUS_DST_COLOR": 775,
|
||||
"SRC_ALPHA_SATURATE": 776,
|
||||
"FUNC_ADD": 32774,
|
||||
"BLEND_EQUATION": 32777,
|
||||
"BLEND_EQUATION_RGB": 32777,
|
||||
"BLEND_EQUATION_ALPHA": 34877,
|
||||
"FUNC_SUBTRACT": 32778,
|
||||
"FUNC_REVERSE_SUBTRACT": 32779,
|
||||
"BLEND_DST_RGB": 32968,
|
||||
"BLEND_SRC_RGB": 32969,
|
||||
"BLEND_DST_ALPHA": 32970,
|
||||
"BLEND_SRC_ALPHA": 32971,
|
||||
"CONSTANT_COLOR": 32769,
|
||||
"ONE_MINUS_CONSTANT_COLOR": 32770,
|
||||
"CONSTANT_ALPHA": 32771,
|
||||
"ONE_MINUS_CONSTANT_ALPHA": 32772,
|
||||
"BLEND_COLOR": 32773,
|
||||
"ARRAY_BUFFER": 34962,
|
||||
"ELEMENT_ARRAY_BUFFER": 34963,
|
||||
"ARRAY_BUFFER_BINDING": 34964,
|
||||
"ELEMENT_ARRAY_BUFFER_BINDING": 34965,
|
||||
"STREAM_DRAW": 35040,
|
||||
"STATIC_DRAW": 35044,
|
||||
"DYNAMIC_DRAW": 35048,
|
||||
"BUFFER_SIZE": 34660,
|
||||
"BUFFER_USAGE": 34661,
|
||||
"CURRENT_VERTEX_ATTRIB": 34342,
|
||||
"FRONT": 1028,
|
||||
"BACK": 1029,
|
||||
"FRONT_AND_BACK": 1032,
|
||||
"TEXTURE_2D": 3553,
|
||||
"CULL_FACE": 2884,
|
||||
"BLEND": 3042,
|
||||
"DITHER": 3024,
|
||||
"STENCIL_TEST": 2960,
|
||||
"DEPTH_TEST": 2929,
|
||||
"SCISSOR_TEST": 3089,
|
||||
"POLYGON_OFFSET_FILL": 32823,
|
||||
"SAMPLE_ALPHA_TO_COVERAGE": 32926,
|
||||
"SAMPLE_COVERAGE": 32928,
|
||||
"NO_ERROR": 0,
|
||||
"INVALID_ENUM": 1280,
|
||||
"INVALID_VALUE": 1281,
|
||||
"INVALID_OPERATION": 1282,
|
||||
"OUT_OF_MEMORY": 1285,
|
||||
"CW": 2304,
|
||||
"CCW": 2305,
|
||||
"LINE_WIDTH": 2849,
|
||||
"ALIASED_POINT_SIZE_RANGE": 33901,
|
||||
"ALIASED_LINE_WIDTH_RANGE": 33902,
|
||||
"CULL_FACE_MODE": 2885,
|
||||
"FRONT_FACE": 2886,
|
||||
"DEPTH_RANGE": 2928,
|
||||
"DEPTH_WRITEMASK": 2930,
|
||||
"DEPTH_CLEAR_VALUE": 2931,
|
||||
"DEPTH_FUNC": 2932,
|
||||
"STENCIL_CLEAR_VALUE": 2961,
|
||||
"STENCIL_FUNC": 2962,
|
||||
"STENCIL_FAIL": 2964,
|
||||
"STENCIL_PASS_DEPTH_FAIL": 2965,
|
||||
"STENCIL_PASS_DEPTH_PASS": 2966,
|
||||
"STENCIL_REF": 2967,
|
||||
"STENCIL_VALUE_MASK": 2963,
|
||||
"STENCIL_WRITEMASK": 2968,
|
||||
"STENCIL_BACK_FUNC": 34816,
|
||||
"STENCIL_BACK_FAIL": 34817,
|
||||
"STENCIL_BACK_PASS_DEPTH_FAIL": 34818,
|
||||
"STENCIL_BACK_PASS_DEPTH_PASS": 34819,
|
||||
"STENCIL_BACK_REF": 36003,
|
||||
"STENCIL_BACK_VALUE_MASK": 36004,
|
||||
"STENCIL_BACK_WRITEMASK": 36005,
|
||||
"VIEWPORT": 2978,
|
||||
"SCISSOR_BOX": 3088,
|
||||
"COLOR_CLEAR_VALUE": 3106,
|
||||
"COLOR_WRITEMASK": 3107,
|
||||
"UNPACK_ALIGNMENT": 3317,
|
||||
"PACK_ALIGNMENT": 3333,
|
||||
"MAX_TEXTURE_SIZE": 3379,
|
||||
"MAX_VIEWPORT_DIMS": 3386,
|
||||
"SUBPIXEL_BITS": 3408,
|
||||
"RED_BITS": 3410,
|
||||
"GREEN_BITS": 3411,
|
||||
"BLUE_BITS": 3412,
|
||||
"ALPHA_BITS": 3413,
|
||||
"DEPTH_BITS": 3414,
|
||||
"STENCIL_BITS": 3415,
|
||||
"POLYGON_OFFSET_UNITS": 10752,
|
||||
"POLYGON_OFFSET_FACTOR": 32824,
|
||||
"TEXTURE_BINDING_2D": 32873,
|
||||
"SAMPLE_BUFFERS": 32936,
|
||||
"SAMPLES": 32937,
|
||||
"SAMPLE_COVERAGE_VALUE": 32938,
|
||||
"SAMPLE_COVERAGE_INVERT": 32939,
|
||||
"COMPRESSED_TEXTURE_FORMATS": 34467,
|
||||
"DONT_CARE": 4352,
|
||||
"FASTEST": 4353,
|
||||
"NICEST": 4354,
|
||||
"GENERATE_MIPMAP_HINT": 33170,
|
||||
"BYTE": 5120,
|
||||
"UNSIGNED_BYTE": 5121,
|
||||
"SHORT": 5122,
|
||||
"UNSIGNED_SHORT": 5123,
|
||||
"INT": 5124,
|
||||
"UNSIGNED_INT": 5125,
|
||||
"FLOAT": 5126,
|
||||
"DEPTH_COMPONENT": 6402,
|
||||
"ALPHA": 6406,
|
||||
"RGB": 6407,
|
||||
"RGBA": 6408,
|
||||
"LUMINANCE": 6409,
|
||||
"LUMINANCE_ALPHA": 6410,
|
||||
"UNSIGNED_SHORT_4_4_4_4": 32819,
|
||||
"UNSIGNED_SHORT_5_5_5_1": 32820,
|
||||
"UNSIGNED_SHORT_5_6_5": 33635,
|
||||
"FRAGMENT_SHADER": 35632,
|
||||
"VERTEX_SHADER": 35633,
|
||||
"MAX_VERTEX_ATTRIBS": 34921,
|
||||
"MAX_VERTEX_UNIFORM_VECTORS": 36347,
|
||||
"MAX_VARYING_VECTORS": 36348,
|
||||
"MAX_COMBINED_TEXTURE_IMAGE_UNITS": 35661,
|
||||
"MAX_VERTEX_TEXTURE_IMAGE_UNITS": 35660,
|
||||
"MAX_TEXTURE_IMAGE_UNITS": 34930,
|
||||
"MAX_FRAGMENT_UNIFORM_VECTORS": 36349,
|
||||
"SHADER_TYPE": 35663,
|
||||
"DELETE_STATUS": 35712,
|
||||
"LINK_STATUS": 35714,
|
||||
"VALIDATE_STATUS": 35715,
|
||||
"ATTACHED_SHADERS": 35717,
|
||||
"ACTIVE_UNIFORMS": 35718,
|
||||
"ACTIVE_ATTRIBUTES": 35721,
|
||||
"SHADING_LANGUAGE_VERSION": 35724,
|
||||
"CURRENT_PROGRAM": 35725,
|
||||
"NEVER": 512,
|
||||
"LESS": 513,
|
||||
"EQUAL": 514,
|
||||
"LEQUAL": 515,
|
||||
"GREATER": 516,
|
||||
"NOTEQUAL": 517,
|
||||
"GEQUAL": 518,
|
||||
"ALWAYS": 519,
|
||||
"KEEP": 7680,
|
||||
"REPLACE": 7681,
|
||||
"INCR": 7682,
|
||||
"DECR": 7683,
|
||||
"INVERT": 5386,
|
||||
"INCR_WRAP": 34055,
|
||||
"DECR_WRAP": 34056,
|
||||
"VENDOR": 7936,
|
||||
"RENDERER": 7937,
|
||||
"VERSION": 7938,
|
||||
"NEAREST": 9728,
|
||||
"LINEAR": 9729,
|
||||
"NEAREST_MIPMAP_NEAREST": 9984,
|
||||
"LINEAR_MIPMAP_NEAREST": 9985,
|
||||
"NEAREST_MIPMAP_LINEAR": 9986,
|
||||
"LINEAR_MIPMAP_LINEAR": 9987,
|
||||
"TEXTURE_MAG_FILTER": 10240,
|
||||
"TEXTURE_MIN_FILTER": 10241,
|
||||
"TEXTURE_WRAP_S": 10242,
|
||||
"TEXTURE_WRAP_T": 10243,
|
||||
"TEXTURE": 5890,
|
||||
"TEXTURE_CUBE_MAP": 34067,
|
||||
"TEXTURE_BINDING_CUBE_MAP": 34068,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_X": 34069,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_X": 34070,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Y": 34071,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Y": 34072,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Z": 34073,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Z": 34074,
|
||||
"MAX_CUBE_MAP_TEXTURE_SIZE": 34076,
|
||||
"TEXTURE0": 33984,
|
||||
"TEXTURE1": 33985,
|
||||
"TEXTURE2": 33986,
|
||||
"TEXTURE3": 33987,
|
||||
"TEXTURE4": 33988,
|
||||
"TEXTURE5": 33989,
|
||||
"TEXTURE6": 33990,
|
||||
"TEXTURE7": 33991,
|
||||
"TEXTURE8": 33992,
|
||||
"TEXTURE9": 33993,
|
||||
"TEXTURE10": 33994,
|
||||
"TEXTURE11": 33995,
|
||||
"TEXTURE12": 33996,
|
||||
"TEXTURE13": 33997,
|
||||
"TEXTURE14": 33998,
|
||||
"TEXTURE15": 33999,
|
||||
"TEXTURE16": 34000,
|
||||
"TEXTURE17": 34001,
|
||||
"TEXTURE18": 34002,
|
||||
"TEXTURE19": 34003,
|
||||
"TEXTURE20": 34004,
|
||||
"TEXTURE21": 34005,
|
||||
"TEXTURE22": 34006,
|
||||
"TEXTURE23": 34007,
|
||||
"TEXTURE24": 34008,
|
||||
"TEXTURE25": 34009,
|
||||
"TEXTURE26": 34010,
|
||||
"TEXTURE27": 34011,
|
||||
"TEXTURE28": 34012,
|
||||
"TEXTURE29": 34013,
|
||||
"TEXTURE30": 34014,
|
||||
"TEXTURE31": 34015,
|
||||
"ACTIVE_TEXTURE": 34016,
|
||||
"REPEAT": 10497,
|
||||
"CLAMP_TO_EDGE": 33071,
|
||||
"MIRRORED_REPEAT": 33648,
|
||||
"FLOAT_VEC2": 35664,
|
||||
"FLOAT_VEC3": 35665,
|
||||
"FLOAT_VEC4": 35666,
|
||||
"INT_VEC2": 35667,
|
||||
"INT_VEC3": 35668,
|
||||
"INT_VEC4": 35669,
|
||||
"BOOL": 35670,
|
||||
"BOOL_VEC2": 35671,
|
||||
"BOOL_VEC3": 35672,
|
||||
"BOOL_VEC4": 35673,
|
||||
"FLOAT_MAT2": 35674,
|
||||
"FLOAT_MAT3": 35675,
|
||||
"FLOAT_MAT4": 35676,
|
||||
"SAMPLER_2D": 35678,
|
||||
"SAMPLER_CUBE": 35680,
|
||||
"VERTEX_ATTRIB_ARRAY_ENABLED": 34338,
|
||||
"VERTEX_ATTRIB_ARRAY_SIZE": 34339,
|
||||
"VERTEX_ATTRIB_ARRAY_STRIDE": 34340,
|
||||
"VERTEX_ATTRIB_ARRAY_TYPE": 34341,
|
||||
"VERTEX_ATTRIB_ARRAY_NORMALIZED": 34922,
|
||||
"VERTEX_ATTRIB_ARRAY_POINTER": 34373,
|
||||
"VERTEX_ATTRIB_ARRAY_BUFFER_BINDING": 34975,
|
||||
"IMPLEMENTATION_COLOR_READ_TYPE": 35738,
|
||||
"IMPLEMENTATION_COLOR_READ_FORMAT": 35739,
|
||||
"COMPILE_STATUS": 35713,
|
||||
"LOW_FLOAT": 36336,
|
||||
"MEDIUM_FLOAT": 36337,
|
||||
"HIGH_FLOAT": 36338,
|
||||
"LOW_INT": 36339,
|
||||
"MEDIUM_INT": 36340,
|
||||
"HIGH_INT": 36341,
|
||||
"FRAMEBUFFER": 36160,
|
||||
"RENDERBUFFER": 36161,
|
||||
"RGBA4": 32854,
|
||||
"RGB5_A1": 32855,
|
||||
"RGB565": 36194,
|
||||
"DEPTH_COMPONENT16": 33189,
|
||||
"STENCIL_INDEX8": 36168,
|
||||
"DEPTH_STENCIL": 34041,
|
||||
"RENDERBUFFER_WIDTH": 36162,
|
||||
"RENDERBUFFER_HEIGHT": 36163,
|
||||
"RENDERBUFFER_INTERNAL_FORMAT": 36164,
|
||||
"RENDERBUFFER_RED_SIZE": 36176,
|
||||
"RENDERBUFFER_GREEN_SIZE": 36177,
|
||||
"RENDERBUFFER_BLUE_SIZE": 36178,
|
||||
"RENDERBUFFER_ALPHA_SIZE": 36179,
|
||||
"RENDERBUFFER_DEPTH_SIZE": 36180,
|
||||
"RENDERBUFFER_STENCIL_SIZE": 36181,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE": 36048,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_NAME": 36049,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL": 36050,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE": 36051,
|
||||
"COLOR_ATTACHMENT0": 36064,
|
||||
"DEPTH_ATTACHMENT": 36096,
|
||||
"STENCIL_ATTACHMENT": 36128,
|
||||
"DEPTH_STENCIL_ATTACHMENT": 33306,
|
||||
"NONE": 0,
|
||||
"FRAMEBUFFER_COMPLETE": 36053,
|
||||
"FRAMEBUFFER_INCOMPLETE_ATTACHMENT": 36054,
|
||||
"FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT": 36055,
|
||||
"FRAMEBUFFER_INCOMPLETE_DIMENSIONS": 36057,
|
||||
"FRAMEBUFFER_UNSUPPORTED": 36061,
|
||||
"FRAMEBUFFER_BINDING": 36006,
|
||||
"RENDERBUFFER_BINDING": 36007,
|
||||
"MAX_RENDERBUFFER_SIZE": 34024,
|
||||
"INVALID_FRAMEBUFFER_OPERATION": 1286,
|
||||
"UNPACK_FLIP_Y_WEBGL": 37440,
|
||||
"UNPACK_PREMULTIPLY_ALPHA_WEBGL": 37441,
|
||||
"CONTEXT_LOST_WEBGL": 37442,
|
||||
"UNPACK_COLORSPACE_CONVERSION_WEBGL": 37443,
|
||||
"BROWSER_DEFAULT_WEBGL": 37444
|
||||
};
|
||||
143
components/firstui/fui-barcode/gcanvas/context-webgl/GLmethod.js
Normal file
143
components/firstui/fui-barcode/gcanvas/context-webgl/GLmethod.js
Normal file
@ -0,0 +1,143 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 0 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
let i = 1;
|
||||
|
||||
const GLmethod = {};
|
||||
|
||||
GLmethod.activeTexture = i++; //1
|
||||
GLmethod.attachShader = i++;
|
||||
GLmethod.bindAttribLocation = i++;
|
||||
GLmethod.bindBuffer = i++;
|
||||
GLmethod.bindFramebuffer = i++;
|
||||
GLmethod.bindRenderbuffer = i++;
|
||||
GLmethod.bindTexture = i++;
|
||||
GLmethod.blendColor = i++;
|
||||
GLmethod.blendEquation = i++;
|
||||
GLmethod.blendEquationSeparate = i++; //10
|
||||
GLmethod.blendFunc = i++;
|
||||
GLmethod.blendFuncSeparate = i++;
|
||||
GLmethod.bufferData = i++;
|
||||
GLmethod.bufferSubData = i++;
|
||||
GLmethod.checkFramebufferStatus = i++;
|
||||
GLmethod.clear = i++;
|
||||
GLmethod.clearColor = i++;
|
||||
GLmethod.clearDepth = i++;
|
||||
GLmethod.clearStencil = i++;
|
||||
GLmethod.colorMask = i++; //20
|
||||
GLmethod.compileShader = i++;
|
||||
GLmethod.compressedTexImage2D = i++;
|
||||
GLmethod.compressedTexSubImage2D = i++;
|
||||
GLmethod.copyTexImage2D = i++;
|
||||
GLmethod.copyTexSubImage2D = i++;
|
||||
GLmethod.createBuffer = i++;
|
||||
GLmethod.createFramebuffer = i++;
|
||||
GLmethod.createProgram = i++;
|
||||
GLmethod.createRenderbuffer = i++;
|
||||
GLmethod.createShader = i++; //30
|
||||
GLmethod.createTexture = i++;
|
||||
GLmethod.cullFace = i++;
|
||||
GLmethod.deleteBuffer = i++;
|
||||
GLmethod.deleteFramebuffer = i++;
|
||||
GLmethod.deleteProgram = i++;
|
||||
GLmethod.deleteRenderbuffer = i++;
|
||||
GLmethod.deleteShader = i++;
|
||||
GLmethod.deleteTexture = i++;
|
||||
GLmethod.depthFunc = i++;
|
||||
GLmethod.depthMask = i++; //40
|
||||
GLmethod.depthRange = i++;
|
||||
GLmethod.detachShader = i++;
|
||||
GLmethod.disable = i++;
|
||||
GLmethod.disableVertexAttribArray = i++;
|
||||
GLmethod.drawArrays = i++;
|
||||
GLmethod.drawArraysInstancedANGLE = i++;
|
||||
GLmethod.drawElements = i++;
|
||||
GLmethod.drawElementsInstancedANGLE = i++;
|
||||
GLmethod.enable = i++;
|
||||
GLmethod.enableVertexAttribArray = i++; //50
|
||||
GLmethod.flush = i++;
|
||||
GLmethod.framebufferRenderbuffer = i++;
|
||||
GLmethod.framebufferTexture2D = i++;
|
||||
GLmethod.frontFace = i++;
|
||||
GLmethod.generateMipmap = i++;
|
||||
GLmethod.getActiveAttrib = i++;
|
||||
GLmethod.getActiveUniform = i++;
|
||||
GLmethod.getAttachedShaders = i++;
|
||||
GLmethod.getAttribLocation = i++;
|
||||
GLmethod.getBufferParameter = i++; //60
|
||||
GLmethod.getContextAttributes = i++;
|
||||
GLmethod.getError = i++;
|
||||
GLmethod.getExtension = i++;
|
||||
GLmethod.getFramebufferAttachmentParameter = i++;
|
||||
GLmethod.getParameter = i++;
|
||||
GLmethod.getProgramInfoLog = i++;
|
||||
GLmethod.getProgramParameter = i++;
|
||||
GLmethod.getRenderbufferParameter = i++;
|
||||
GLmethod.getShaderInfoLog = i++;
|
||||
GLmethod.getShaderParameter = i++; //70
|
||||
GLmethod.getShaderPrecisionFormat = i++;
|
||||
GLmethod.getShaderSource = i++;
|
||||
GLmethod.getSupportedExtensions = i++;
|
||||
GLmethod.getTexParameter = i++;
|
||||
GLmethod.getUniform = i++;
|
||||
GLmethod.getUniformLocation = i++;
|
||||
GLmethod.getVertexAttrib = i++;
|
||||
GLmethod.getVertexAttribOffset = i++;
|
||||
GLmethod.isBuffer = i++;
|
||||
GLmethod.isContextLost = i++; //80
|
||||
GLmethod.isEnabled = i++;
|
||||
GLmethod.isFramebuffer = i++;
|
||||
GLmethod.isProgram = i++;
|
||||
GLmethod.isRenderbuffer = i++;
|
||||
GLmethod.isShader = i++;
|
||||
GLmethod.isTexture = i++;
|
||||
GLmethod.lineWidth = i++;
|
||||
GLmethod.linkProgram = i++;
|
||||
GLmethod.pixelStorei = i++;
|
||||
GLmethod.polygonOffset = i++; //90
|
||||
GLmethod.readPixels = i++;
|
||||
GLmethod.renderbufferStorage = i++;
|
||||
GLmethod.sampleCoverage = i++;
|
||||
GLmethod.scissor = i++;
|
||||
GLmethod.shaderSource = i++;
|
||||
GLmethod.stencilFunc = i++;
|
||||
GLmethod.stencilFuncSeparate = i++;
|
||||
GLmethod.stencilMask = i++;
|
||||
GLmethod.stencilMaskSeparate = i++;
|
||||
GLmethod.stencilOp = i++; //100
|
||||
GLmethod.stencilOpSeparate = i++;
|
||||
GLmethod.texImage2D = i++;
|
||||
GLmethod.texParameterf = i++;
|
||||
GLmethod.texParameteri = i++;
|
||||
GLmethod.texSubImage2D = i++;
|
||||
GLmethod.uniform1f = i++;
|
||||
GLmethod.uniform1fv = i++;
|
||||
GLmethod.uniform1i = i++;
|
||||
GLmethod.uniform1iv = i++;
|
||||
GLmethod.uniform2f = i++; //110
|
||||
GLmethod.uniform2fv = i++;
|
||||
GLmethod.uniform2i = i++;
|
||||
GLmethod.uniform2iv = i++;
|
||||
GLmethod.uniform3f = i++;
|
||||
GLmethod.uniform3fv = i++;
|
||||
GLmethod.uniform3i = i++;
|
||||
GLmethod.uniform3iv = i++;
|
||||
GLmethod.uniform4f = i++;
|
||||
GLmethod.uniform4fv = i++;
|
||||
GLmethod.uniform4i = i++; //120
|
||||
GLmethod.uniform4iv = i++;
|
||||
GLmethod.uniformMatrix2fv = i++;
|
||||
GLmethod.uniformMatrix3fv = i++;
|
||||
GLmethod.uniformMatrix4fv = i++;
|
||||
GLmethod.useProgram = i++;
|
||||
GLmethod.validateProgram = i++;
|
||||
GLmethod.vertexAttrib1f = i++; //new
|
||||
GLmethod.vertexAttrib2f = i++; //new
|
||||
GLmethod.vertexAttrib3f = i++; //new
|
||||
GLmethod.vertexAttrib4f = i++; //new //130
|
||||
GLmethod.vertexAttrib1fv = i++; //new
|
||||
GLmethod.vertexAttrib2fv = i++; //new
|
||||
GLmethod.vertexAttrib3fv = i++; //new
|
||||
GLmethod.vertexAttrib4fv = i++; //new
|
||||
GLmethod.vertexAttribPointer = i++;
|
||||
GLmethod.viewport = i++;
|
||||
|
||||
export default GLmethod;
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 40 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const GLtype = {};
|
||||
|
||||
[
|
||||
"GLbitfield",
|
||||
"GLboolean",
|
||||
"GLbyte",
|
||||
"GLclampf",
|
||||
"GLenum",
|
||||
"GLfloat",
|
||||
"GLint",
|
||||
"GLintptr",
|
||||
"GLsizei",
|
||||
"GLsizeiptr",
|
||||
"GLshort",
|
||||
"GLubyte",
|
||||
"GLuint",
|
||||
"GLushort"
|
||||
].sort().map((typeName, i) => GLtype[typeName] = 1 >> (i + 1));
|
||||
|
||||
export default GLtype;
|
||||
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61 4 0 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLProgram';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLProgram {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 140 7 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLRenderBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLRenderbuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 140 7 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLShader';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLShader {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 140 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default class WebGLShaderPrecisionFormat {
|
||||
className = 'WebGLShaderPrecisionFormat';
|
||||
|
||||
constructor({
|
||||
rangeMin, rangeMax, precision
|
||||
}) {
|
||||
this.rangeMin = rangeMin;
|
||||
this.rangeMax = rangeMax;
|
||||
this.precision = precision;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 407 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLTexture';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLTexture {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 40 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLUniformLocation';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLUniformLocation {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 14 0 7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export function getTransferedObjectUUID(name, id) {
|
||||
return `${name.toLowerCase()}-${id}`;
|
||||
}
|
||||
75
components/firstui/fui-barcode/gcanvas/env/canvas.js
vendored
Normal file
75
components/firstui/fui-barcode/gcanvas/env/canvas.js
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 4 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import GContext2D from '../context-2d/RenderingContext';
|
||||
import GContextWebGL from '../context-webgl/RenderingContext';
|
||||
|
||||
export default class GCanvas {
|
||||
|
||||
// static GBridge = null;
|
||||
|
||||
id = null;
|
||||
|
||||
_needRender = true;
|
||||
|
||||
constructor(id, { disableAutoSwap }) {
|
||||
this.id = id;
|
||||
|
||||
this._disableAutoSwap = disableAutoSwap;
|
||||
if (disableAutoSwap) {
|
||||
this._swapBuffers = () => {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getContext(type) {
|
||||
|
||||
let context = null;
|
||||
|
||||
if (type.match(/webgl/i)) {
|
||||
context = new GContextWebGL(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
if (!this._disableAutoSwap) {
|
||||
const render = () => {
|
||||
if (this._needRender) {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
this._needRender = false;
|
||||
}
|
||||
}
|
||||
setInterval(render, 16);
|
||||
}
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
|
||||
} else if (type.match(/2d/i)) {
|
||||
context = new GContext2D(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
// const render = ( callback ) => {
|
||||
//
|
||||
// const commands = context._drawCommands;
|
||||
// context._drawCommands = '';
|
||||
//
|
||||
// GCanvas.GBridge.render2d(this.id, commands, callback);
|
||||
// this._needRender = false;
|
||||
// }
|
||||
// //draw方法触发
|
||||
// context._flush = render;
|
||||
// //setInterval(render, 16);
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 0);
|
||||
} else {
|
||||
throw new Error('not supported context ' + type);
|
||||
}
|
||||
|
||||
return context;
|
||||
|
||||
}
|
||||
|
||||
reset() {
|
||||
GCanvas.GBridge.callReset(this.id);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
97
components/firstui/fui-barcode/gcanvas/env/image.js
vendored
Normal file
97
components/firstui/fui-barcode/gcanvas/env/image.js
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 40725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
let incId = 1;
|
||||
|
||||
const noop = function () { };
|
||||
|
||||
class GImage {
|
||||
|
||||
static GBridge = null;
|
||||
|
||||
constructor() {
|
||||
this._id = incId++;
|
||||
this._width = 0;
|
||||
this._height = 0;
|
||||
this._src = undefined;
|
||||
this._onload = noop;
|
||||
this._onerror = noop;
|
||||
this.complete = false;
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this._width;
|
||||
}
|
||||
set width(v) {
|
||||
this._width = v;
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
set height(v) {
|
||||
this._height = v;
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this._src;
|
||||
}
|
||||
|
||||
set src(v) {
|
||||
|
||||
if (v.startsWith('//')) {
|
||||
v = 'http:' + v;
|
||||
}
|
||||
|
||||
this._src = v;
|
||||
|
||||
GImage.GBridge.perloadImage([this._src, this._id], (data) => {
|
||||
if (typeof data === 'string') {
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
if (data.error) {
|
||||
var evt = { type: 'error', target: this };
|
||||
this.onerror(evt);
|
||||
} else {
|
||||
this.complete = true;
|
||||
this.width = typeof data.width === 'number' ? data.width : 0;
|
||||
this.height = typeof data.height === 'number' ? data.height : 0;
|
||||
var evt = { type: 'load', target: this };
|
||||
this.onload(evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = listener;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = listener;
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = noop;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = noop;
|
||||
}
|
||||
}
|
||||
|
||||
get onload() {
|
||||
return this._onload;
|
||||
}
|
||||
|
||||
set onload(v) {
|
||||
this._onload = v;
|
||||
}
|
||||
|
||||
get onerror() {
|
||||
return this._onerror;
|
||||
}
|
||||
|
||||
set onerror(v) {
|
||||
this._onerror = v;
|
||||
}
|
||||
}
|
||||
|
||||
export default GImage;
|
||||
25
components/firstui/fui-barcode/gcanvas/env/tool.js
vendored
Normal file
25
components/firstui/fui-barcode/gcanvas/env/tool.js
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
|
||||
export function ArrayBufferToBase64 (buffer) {
|
||||
var binary = '';
|
||||
var bytes = new Uint8ClampedArray(buffer);
|
||||
for (var len = bytes.byteLength, i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
export function Base64ToUint8ClampedArray(base64String) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/\-/g, '+')
|
||||
.replace(/_/g, '/');
|
||||
|
||||
const rawData = atob(base64);
|
||||
const outputArray = new Uint8ClampedArray(rawData.length);
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
}
|
||||
48
components/firstui/fui-barcode/gcanvas/index.js
Normal file
48
components/firstui/fui-barcode/gcanvas/index.js
Normal file
@ -0,0 +1,48 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61 40725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import GCanvas from './env/canvas';
|
||||
import GImage from './env/image';
|
||||
|
||||
import GWebGLRenderingContext from './context-webgl/RenderingContext';
|
||||
import GContext2D from './context-2d/RenderingContext';
|
||||
|
||||
import GBridgeWeex from './bridge/bridge-weex';
|
||||
|
||||
export let Image = GImage;
|
||||
|
||||
export let WeexBridge = GBridgeWeex;
|
||||
|
||||
export function enable(el, {
|
||||
bridge,
|
||||
debug,
|
||||
disableAutoSwap,
|
||||
disableComboCommands
|
||||
} = {}) {
|
||||
|
||||
const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
|
||||
|
||||
GBridge.callEnable(el.ref, [
|
||||
0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
|
||||
-1, // hybridLayerType: 0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
|
||||
false, // supportScroll
|
||||
false, // newCanvasMode
|
||||
1, // compatible
|
||||
'white', // clearColor
|
||||
false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
|
||||
]);
|
||||
|
||||
if (debug === true) {
|
||||
GBridge.callEnableDebug();
|
||||
}
|
||||
if (disableComboCommands) {
|
||||
GBridge.callEnableDisableCombo();
|
||||
}
|
||||
|
||||
var canvas = new GCanvas(el.ref, {
|
||||
disableAutoSwap
|
||||
});
|
||||
let pixelRatio = uni.getSystemInfoSync().pixelRatio;
|
||||
canvas.width = el.style.width * pixelRatio;
|
||||
canvas.height = el.style.height * pixelRatio;
|
||||
|
||||
return canvas;
|
||||
};
|
||||
276
components/firstui/fui-bottom-navbar/fui-bottom-navbar.vue
Normal file
276
components/firstui/fui-bottom-navbar/fui-bottom-navbar.vue
Normal file
@ -0,0 +1,276 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 614 07 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-bottom__navbar-wrap" :class="{'fui-bottom__navbar-fixed':isFixed}"
|
||||
:style="{background:background,zIndex:zIndex}">
|
||||
<view class="fui-bottom__navbar-inner" :class="{'fui-bottom__navbar-border':isBorder}"
|
||||
:style="{height:height+'rpx',borderTopColor:isBorder && isNvue?lineColor:'transparent'}">
|
||||
<view class="fui-bottom__navbar-item" :style="{height:height+'rpx'}" v-for="(item,index) in tabs"
|
||||
:key="index" @tap="itemClick(index)">
|
||||
<fui-icon :name="item.name" :size="item.size || 24" :color="item.color || color" v-if="item.name">
|
||||
</fui-icon>
|
||||
<image :src="item.src" :style="{width:(item.width || 40)+'rpx',height:(item.height || 40)+'rpx'}"
|
||||
v-if="item.src && !item.name"></image>
|
||||
<text
|
||||
:style="{fontSize:size+'rpx',color:color,fontWeight:fontWeight,paddingLeft:(item.name || item.src?left:0)+'rpx'}">{{item.text}}</text>
|
||||
<view class="fui-bottom__navbar-line" :style="{borderRightColor:lineColor}"
|
||||
v-if="index!==tabs.length-1 && isDivider"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-bn__safe-area" :class="{'fui-bn__safe-weex':iphoneX}"
|
||||
v-if="(iphoneX || !isNvue) && isFixed && safeArea">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//非easycom模式取消注释引入字体组件，按实际路径进行调整
|
||||
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
||||
export default {
|
||||
name: "fui-bottom-navbar",
|
||||
emits: ['init', 'click'],
|
||||
// components:{
|
||||
// fuiIcon
|
||||
// },
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 28
|
||||
},
|
||||
fontWeight: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
left: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
isBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isDivider: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#EEEEEE'
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 900
|
||||
},
|
||||
//是否适配底部安全区
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true
|
||||
// #endif
|
||||
return {
|
||||
tabs: [],
|
||||
iphoneX: false,
|
||||
isNvue: isNvue
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// #ifndef H5
|
||||
this.emitInit()
|
||||
// #endif
|
||||
this.initData(this.items)
|
||||
},
|
||||
// #ifdef H5
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.emitInit()
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
watch: {
|
||||
items(vals) {
|
||||
this.initData(vals)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitInit() {
|
||||
const res = uni.getSystemInfoSync();
|
||||
let iphonex = this.isPhoneX(res);
|
||||
// #ifdef APP-NVUE || MP-TOUTIAO
|
||||
this.iphoneX = iphonex;
|
||||
// #endif
|
||||
let safeAreaH = iphonex ? 34 : 0
|
||||
this.$emit('init', {
|
||||
height: uni.upx2px(this.height) + safeAreaH,
|
||||
windowWidth: res.windowWidth
|
||||
})
|
||||
},
|
||||
initData(vals) {
|
||||
if (vals && vals.length > 0) {
|
||||
if (typeof vals[0] === 'string') {
|
||||
vals = vals.map(item => {
|
||||
return {
|
||||
text: item
|
||||
}
|
||||
})
|
||||
}
|
||||
this.tabs = vals;
|
||||
}
|
||||
},
|
||||
isPhoneX(res) {
|
||||
if (!this.safeArea) return false;
|
||||
let iphonex = false;
|
||||
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
|
||||
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
|
||||
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
|
||||
'iphone14pro', 'iphone14promax', 'iphone15'
|
||||
]
|
||||
const model = res.model.replace(/\s/g, "").toLowerCase()
|
||||
const newModel = model.split('<')[0]
|
||||
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
|
||||
.bottom > 0)) {
|
||||
iphonex = true;
|
||||
}
|
||||
return iphonex;
|
||||
},
|
||||
itemClick(index) {
|
||||
this.$emit('click', {
|
||||
index: index,
|
||||
...this.tabs[index]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-bottom__navbar-wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-bottom__navbar-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.fui-bottom__navbar-inner {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fui-bottom__navbar-border {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-top-width: 0.5px;
|
||||
border-top-style: solid;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-bottom__navbar-border::before {
|
||||
content: ' ';
|
||||
border-top: 1px solid var(--fui-color-border, #EEEEEE);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 0;
|
||||
display: block;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-bottom__navbar-item {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-bottom__navbar-item:active {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.fui-bottom__navbar-line {
|
||||
position: absolute;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-right-width: 0.5px;
|
||||
/* #endif */
|
||||
border-right-style: solid;
|
||||
border-right-color: #EEEEEE;
|
||||
/* #ifndef APP-NVUE */
|
||||
border-right-width: 1px;
|
||||
transform: scaleX(0.5) translateZ(0);
|
||||
/* #endif */
|
||||
right: 0;
|
||||
top: 16rpx;
|
||||
bottom: 16rpx;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE || MP-TOUTIAO */
|
||||
.fui-bn__safe-weex {
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-bn__safe-area {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE || MP-TOUTIAO */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
252
components/firstui/fui-bottom-popup/fui-bottom-popup.vue
Normal file
252
components/firstui/fui-bottom-popup/fui-bottom-popup.vue
Normal file
@ -0,0 +1,252 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 407 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-bottom__popup-wrap" :class="{'fui-bottom__popwrap-show':show}"
|
||||
:style="{ zIndex: zIndex,background:maskBackground}" @tap.stop="handleClose" @touchmove.stop.prevent="stop"
|
||||
v-if="isShow || !isNvue" ref="fui_bp_mk_ani">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="fui-bottom__popup-border" :style="{height:radius+'rpx',background: background}" v-if="radius">
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view ref="fui_bp_ani" class="fui-bottom__popup"
|
||||
:class="{ 'fui-bottom__popup-show': show,'fui-bp__safe-weex':iphoneX && safeArea}"
|
||||
:style="{borderTopLeftRadius:radius+'rpx',borderTopRightRadius:radius+'rpx' ,background: background}"
|
||||
@tap.stop="stop($event,true)">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
/*如果底部有自定义导航栏，可适当设置内容padding-bottom值*/
|
||||
export default {
|
||||
name: 'fui-bottom-popup',
|
||||
emits: ['close'],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//背景颜色
|
||||
background: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//圆角
|
||||
radius: {
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 996
|
||||
},
|
||||
//点击遮罩 是否可关闭
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackground: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.6)'
|
||||
},
|
||||
//是否适配底部安全区
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isAndroid = false;
|
||||
let isNvue = false;
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true;
|
||||
const res = uni.getSystemInfoSync();
|
||||
isAndroid = res.platform.toLocaleLowerCase() == "android"
|
||||
// #endif
|
||||
return {
|
||||
iphoneX: false,
|
||||
isNvue: isNvue,
|
||||
isShow: false,
|
||||
isAndroid: isAndroid
|
||||
}
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
created() {
|
||||
// #ifdef APP-NVUE || MP-TOUTIAO
|
||||
this.iphoneX = this.isPhoneX();
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
handleClose(e) {
|
||||
if (!this.maskClosable) return;
|
||||
this.$emit('close', {});
|
||||
},
|
||||
// #ifdef APP-NVUE || MP-TOUTIAO
|
||||
isPhoneX() {
|
||||
if (!this.safeArea) return false;
|
||||
//34px
|
||||
const res = uni.getSystemInfoSync();
|
||||
let iphonex = false;
|
||||
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
|
||||
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
|
||||
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
|
||||
'iphone14pro', 'iphone14promax'
|
||||
]
|
||||
const model = res.model.replace(/\s/g, "").toLowerCase()
|
||||
const newModel = model.split('<')[0]
|
||||
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
|
||||
.bottom > 0)) {
|
||||
iphonex = true;
|
||||
}
|
||||
return iphonex;
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
open() {
|
||||
this.isShow = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation(true);
|
||||
}, 50);
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this._animation(false);
|
||||
},
|
||||
_animation(type) {
|
||||
if (!this.$refs['fui_bp_ani'] || !this.$refs['fui_bp_mk_ani']) return;
|
||||
animation.transition(
|
||||
this.$refs['fui_bp_mk_ani'].ref, {
|
||||
styles: {
|
||||
opacity: type ? 1 : 0
|
||||
},
|
||||
duration: 250,
|
||||
timingFunction: 'ease-in-out',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
},
|
||||
() => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
}
|
||||
);
|
||||
//nvue android 部分手机隐藏时动画有抖动感，调整duration去动画
|
||||
animation.transition(
|
||||
this.$refs['fui_bp_ani'].ref, {
|
||||
styles: {
|
||||
transform: `translateY(${type ? '0' : '100%'})`
|
||||
},
|
||||
duration: !type && this.isAndroid ? 20 : 250,
|
||||
timingFunction: 'ease-in-out',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
},
|
||||
() => {}
|
||||
);
|
||||
},
|
||||
// #endif
|
||||
stop(e, tap) {
|
||||
// #ifdef APP-NVUE
|
||||
tap && e.stopPropagation();
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-bottom__popup-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
transition: all ease-in-out .2s;
|
||||
visibility: hidden;
|
||||
border-bottom-width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
opacity: 0.001;
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-bottom__popup-border {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-bottom__popwrap-show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-bottom__popup {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all 0.3s ease-in-out;
|
||||
min-height: 20rpx;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE || MP-TOUTIAO */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: translateY(100%);
|
||||
flex-direction: row;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-bottom__popup-show {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE || MP-TOUTIAO */
|
||||
.fui-bp__safe-weex {
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
520
components/firstui/fui-bubble-box/fui-bubble-box.vue
Normal file
520
components/firstui/fui-bubble-box/fui-bubble-box.vue
Normal file
@ -0,0 +1,520 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1861 40 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-bubble__box-wrap" ref="fui_bb_wrap">
|
||||
<slot></slot>
|
||||
<view @touchmove.stop.prevent="stop" class="fui-bubble__box-mask"
|
||||
:class="[show?'fui-bb__unnvue-show':'',isShow?'fui-bb__opciaty-show':'fui-bb__opciaty-hidden']"
|
||||
:style="getMaskStyl" v-if="isMask && isVisible" @tap="handleClose"></view>
|
||||
<view class="fui-bubble__box-inner" ref="fui_bb_el" :style="getBbStyl"
|
||||
:class="[direction==='top' || direction==='bottom'?'fui-bubble__box-col':'fui-bubble__box-row',position==='absolute'?('fui-bb__list-'+direction):'',show?'fui-bb__unnvue-show':'',isShow?'fui-bb__opciaty-show':'fui-bb__opciaty-hidden']"
|
||||
v-if="isVisible">
|
||||
<view class="fui-bb__triangle-wrap" :style="getStyle" v-if="direction==='bottom' || direction==='right'">
|
||||
<view class="fui-bubble__box-triangle" :style="getStyles" :class="['fui-bb__triangle-'+direction]">
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-bubble__box-list" :style="{background:background,width:width+'rpx'}">
|
||||
<view class="fui-bubble__box-item"
|
||||
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0}"
|
||||
v-for="(item,index) in items" :key="index" @tap.stop="handleClick(index)">
|
||||
<fui-icon :name="item.name" :size="item.size || 60" :color="item.color || color" v-if="item.name">
|
||||
</fui-icon>
|
||||
<image :src="item.src" :style="{width:(item.width || 48)+'rpx',height:(item.height || 48)+'rpx'}"
|
||||
v-if="item.src && !item.name"></image>
|
||||
<text :class="{'fui-bubble__box-text':item.name || item.src}"
|
||||
:style="{fontSize:size+'rpx',color:color,fontWeight:fontWeight}">{{item.text}}</text>
|
||||
<view class="fui-bubble__box-line"
|
||||
:class="[direction==='left'?'fui-bb__line-right':'fui-bb__line-left']"
|
||||
:style="{background:lineColor,left:direction==='left'?0:(padding[3] || padding[1] || 0),right:direction==='left'?(padding[3] || padding[1] || 0):0}"
|
||||
v-if="index!==items.length-1 && showLine"></view>
|
||||
</view>
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<view class="fui-bb__triangle-wrap" :style="getStyle" v-if="direction==='top' || direction==='left'">
|
||||
<view class="fui-bubble__box-triangle" :style="getStyles" :class="['fui-bb__triangle-'+direction]">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom')
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
//非easycom模式取消注释引入字体组件，按实际路径进行调整
|
||||
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
||||
export default {
|
||||
name: 'fui-bubble-box',
|
||||
emits: ['click', 'close'],
|
||||
// components:{
|
||||
// fuiIcon
|
||||
// },
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 300
|
||||
},
|
||||
padding: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['26rpx', '32rpx']
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
left: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
top: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 997
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
fontWeight: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
showLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#eee'
|
||||
},
|
||||
triangle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isMask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackground: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStyle() {
|
||||
let styles = ''
|
||||
if (this.direction === 'left' || this.direction === 'right') {
|
||||
styles += 'width:8px;'
|
||||
} else {
|
||||
styles += 'height:8px;'
|
||||
}
|
||||
return styles
|
||||
},
|
||||
getBbStyl() {
|
||||
let styl = `position:${this.position};z-index:${this.zIndex};`;
|
||||
// #ifdef APP-NVUE
|
||||
styl = 'position:fixed;';
|
||||
// #endif
|
||||
if (this.direction === 'top' || this.direction === 'bottom') {
|
||||
styl += `width:${this.width}rpx;`
|
||||
}
|
||||
if (this.position === 'fixed') {
|
||||
let tb = Number(this.top) ? `top:${this.top}rpx;` : '';
|
||||
tb += Number(this.bottom) ? `bottom:${this.bottom}rpx;` : '';
|
||||
styl += tb ? tb : `top:${this.top}rpx;`
|
||||
let lr = Number(this.left) ? `left:${this.left}rpx;` : '';
|
||||
lr += Number(this.right) ? `right:${this.right}rpx;` : '';
|
||||
styl += lr ? lr : `left:${this.left}rpx;`;
|
||||
} else {
|
||||
// #ifdef APP-NVUE
|
||||
switch (this.direction) {
|
||||
case 'top':
|
||||
styl += `left:${this.n_width / 2 + this.n_left}px;top:${this.n_top+2}px;`
|
||||
break;
|
||||
case 'left':
|
||||
styl += `left:${this.n_left+2}px;top:${this.n_height / 2 + this.n_top}px;`
|
||||
break;
|
||||
case 'right':
|
||||
styl += `left:${this.n_left+this.n_width-2}px;top:${this.n_height / 2 + this.n_top}px;`
|
||||
break;
|
||||
case 'bottom':
|
||||
styl += `left:${this.n_width / 2 + this.n_left}px;top:${this.n_top +this.n_height-2}px;`
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// #endif
|
||||
|
||||
let tb = Number(this.top) ? `margin-top:${this.top}rpx;` : '';
|
||||
tb += Number(this.bottom) ? `margin-top:-${this.bottom}rpx;` : '';
|
||||
styl += tb ? tb : `margin-top:${this.top}rpx;`
|
||||
let lr = Number(this.left) ? `margin-left:${this.left}rpx;` : '';
|
||||
lr += Number(this.right) ? `margin-left:-${this.right}rpx;` : '';
|
||||
styl += lr ? lr : `margin-left:${this.left}rpx;`;
|
||||
}
|
||||
return styl
|
||||
},
|
||||
getStyles() {
|
||||
let $this = this.triangle || {};
|
||||
let styl = `background:${this.background};${this.direction}:0;`
|
||||
if (this.direction === 'top' || this.direction === 'bottom') {
|
||||
styl += $this.left ? `left:${Math.max(32,$this.left || 0)}rpx;` :
|
||||
`right:${Math.max(32,$this.right || 0)}rpx;`;
|
||||
} else {
|
||||
styl += $this.top ? `top:${Math.max(32,$this.top || 0)}rpx;` :
|
||||
`bottom:${Math.max(32,$this.bottom || 0)}rpx;`;
|
||||
}
|
||||
return styl
|
||||
},
|
||||
getMaskStyl() {
|
||||
return `background:${this.maskBackground};z-index:${Number(this.zIndex) - 1};`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(val) {
|
||||
// #ifdef APP-NVUE
|
||||
if (!val) {
|
||||
this.isShow = false;
|
||||
setTimeout(() => {
|
||||
this.isVisible = val;
|
||||
}, 300)
|
||||
} else {
|
||||
this.isVisible = val;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation()
|
||||
}, 50)
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: true,
|
||||
isShow: false,
|
||||
// #ifdef APP-NVUE
|
||||
n_width: 60,
|
||||
n_height: 12,
|
||||
n_top: 0,
|
||||
n_left: 0,
|
||||
transform: ''
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
created() {
|
||||
this.isVisible = this.show;
|
||||
if (this.position !== 'fixed') {
|
||||
this.transform = {
|
||||
top: 'translate(-50%, -100%)',
|
||||
left: 'translate(-100%, -50%)',
|
||||
right: 'translate(0, -50%)',
|
||||
bottom: 'translate(-50%, 0)'
|
||||
} [this.direction || 'top']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
//nvue端每次点击时需要先调用此方法，回调中再进行显示
|
||||
init(callback) {
|
||||
if (this.position === 'fixed') return;
|
||||
dom.getComponentRect(this.$refs['fui_bb_wrap'], option => {
|
||||
if (option && option.result && option.size) {
|
||||
this.n_width = option.size.width
|
||||
this.n_height = option.size.height
|
||||
this.n_top = option.size.top
|
||||
this.n_left = option.size.left
|
||||
callback && callback(true)
|
||||
}
|
||||
})
|
||||
},
|
||||
_animation(type) {
|
||||
if (this.position === 'fixed') {
|
||||
this.isShow = true;
|
||||
} else {
|
||||
if (!this.$refs['fui_bb_el']) return;
|
||||
animation.transition(
|
||||
this.$refs['fui_bb_el'].ref, {
|
||||
styles: {
|
||||
transform: this.transform
|
||||
},
|
||||
duration: 0,
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
}, () => {
|
||||
this.isShow = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
handleClose() {
|
||||
if (!this.maskClosable) return;
|
||||
this.$emit('close', {});
|
||||
},
|
||||
handleClick(index) {
|
||||
this.$emit('click', {
|
||||
index: index
|
||||
});
|
||||
},
|
||||
stop() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-bubble__box-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-bubble__box-inner {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
transition: all 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
/* #endif */
|
||||
/* margin-top: -120rpx; */
|
||||
/* margin-left: 20rpx; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
.fui-bubble__box-list {
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 5;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-bb__list-top {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
/* margin-top: -10px; */
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.fui-bb__list-bottom {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
/* margin-top: 10px; */
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.fui-bb__list-left {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
/* margin-left: -10px; */
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
|
||||
.fui-bb__list-right {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
/* margin-left: 10px; */
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-bubble__box-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fui-bubble__box-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-bubble__box-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-bubble__box-item:active {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.fui-bubble__box-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 0.5px;
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 1px;
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 100%;
|
||||
z-index: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-bb__line-left {
|
||||
left: 32rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fui-bb__line-right {
|
||||
left: 0;
|
||||
right: 32rpx;
|
||||
}
|
||||
|
||||
.fui-bubble__box-text {
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.fui-bubble__box-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
z-index: 3;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-bb__unnvue-show {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-bb__triangle-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.fui-bubble__box-triangle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fui-bb__triangle-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: rotate(-45deg) translateY(-8px);
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(-45deg) translateY(-6.5px);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-bb__triangle-bottom {
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: rotate(45deg) translateY(8px);
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(45deg) translateY(6.5px);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-bb__triangle-right {
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: rotate(45deg) translateX(8px);
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(45deg) translateX(6.5px);
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.fui-bb__triangle-left {
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: rotate(-45deg) translateX(-8px);
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(-45deg) translateX(-6.5px);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-bb__opciaty-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fui-bb__opciaty-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
525
components/firstui/fui-button/fui-button.vue
Normal file
525
components/firstui/fui-button/fui-button.vue
Normal file
@ -0,0 +1,525 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86140 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-button__wrap"
|
||||
:class="[!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
|
||||
:style="{width: getWidth,height: getHeight,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: getRadius,background:getBackground}"
|
||||
@touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd">
|
||||
<button class="fui-button" :class="[
|
||||
bold ? 'fui-text__bold' : '',
|
||||
time && (plain || type==='link') ? 'fui-button__opacity' : '',
|
||||
!background && !disabledBackground && !plain?('fui-button__'+type):'',
|
||||
!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',
|
||||
time && !plain && type!=='link' ? 'fui-button__active' : '',
|
||||
pc && !disabled?(plain || type==='link'?'fui-button__opacity-pc':'fui-button__active-pc'):'',
|
||||
|
||||
]" :style="{
|
||||
width: getWidth,
|
||||
height: getHeight,
|
||||
lineHeight: getHeight,
|
||||
background: disabled ? (disabledBackground || getTypeColor) : (plain ? 'transparent' : getBackground),
|
||||
borderWidth:!borderColor || !isNvue?'0':borderWidth,
|
||||
borderColor: borderColor ? borderColor : disabled && disabledBackground ? disabledBackground : (background || 'transparent'),
|
||||
borderRadius: getRadius,
|
||||
fontSize: getSize,
|
||||
color: getColor
|
||||
}" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter"
|
||||
@getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber" @contact="bindcontact"
|
||||
@error="binderror" @opensetting="bindopensetting" @chooseavatar="bindchooseavatar"
|
||||
@launchapp="bindlaunchapp" :disabled="disabled" :scope="scope" @tap.stop="handleTap">
|
||||
<text class="fui-button__text"
|
||||
:class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}"
|
||||
v-if="text" :style="{fontSize: getSize,lineHeight:getSize,color:getColor}">{{text}}</text>
|
||||
<slot></slot>
|
||||
</button>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view v-if="borderColor" class="fui-button__thin-border"
|
||||
:class="[time && (plain || type==='link') && !disabled ? 'fui-button__opacity' : '',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
|
||||
:style="{borderWidth:borderWidth,borderColor:borderColor ? borderColor : disabled && disabledBackground ? disabledBackground : (background || 'transparent'),borderRadius: getBorderRadius}">
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fui-button',
|
||||
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting','chooseavatar','launchapp'],
|
||||
// #ifdef MP-WEIXIN
|
||||
behaviors: ['wx://form-field-button'],
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU || MP-QQ
|
||||
behaviors: ['uni://form-field'],
|
||||
// #endif
|
||||
props: {
|
||||
//样式类型：primary，success， warning，danger，link，purple，gray
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
//按钮背景色，当传入值时type失效
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮显示文本
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮禁用背景色
|
||||
disabledBackground: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮禁用字体颜色
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
borderWidth: {
|
||||
type: String,
|
||||
default: '0.5px'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
borderWidth: {
|
||||
type: String,
|
||||
default: '1px'
|
||||
},
|
||||
// #endif
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//V1.9.8+ 按钮大小，优先级高于width和height，medium、small、mini
|
||||
btnSize: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//宽度
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
//高度
|
||||
height: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//['20rpx','30rpx','20rpx','30rpx']->[上，右，下，左]
|
||||
margin: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['0', '0']
|
||||
}
|
||||
},
|
||||
//圆角
|
||||
radius: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
openType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//支付宝小程序
|
||||
//当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo
|
||||
scope: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
appParameter: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTypeColor() {
|
||||
// #ifndef APP-NVUE
|
||||
return '';
|
||||
// #endif
|
||||
const app = uni && uni.$fui && uni.$fui.color
|
||||
let colors = {
|
||||
primary: (app && app.primary) || '#465CFF',
|
||||
success: (app && app.success) || '#09BE4F',
|
||||
warning: (app && app.warning) || '#FFB703',
|
||||
danger: (app && app.danger) || '#FF2B2B',
|
||||
link: 'transparent',
|
||||
purple: (app && app.purple) || '#6831FF',
|
||||
gray: '#F8F8F8'
|
||||
}
|
||||
return colors[this.type] || 'transparent'
|
||||
},
|
||||
getBackground() {
|
||||
let color = this.getTypeColor
|
||||
if (this.disabled || this.plain) {
|
||||
color = 'transparent';
|
||||
}
|
||||
if (!this.disabled && !this.plain && this.background) {
|
||||
color = this.background
|
||||
}
|
||||
return color
|
||||
},
|
||||
getColor() {
|
||||
let color = '#fff'
|
||||
if (this.color) {
|
||||
color = this.disabled && this.disabledBackground ? this.disabledColor : this.color
|
||||
} else {
|
||||
if (this.disabled && this.disabledBackground) {
|
||||
color = this.disabledColor || '#FFFFFF'
|
||||
} else {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
const primary = (app && app.primary) || '#465CFF';
|
||||
color = this.type === 'gray' ? primary : '#FFFFFF'
|
||||
}
|
||||
}
|
||||
return color;
|
||||
},
|
||||
getSize() {
|
||||
let size = this.size || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.size) || 32
|
||||
if (this.btnSize === 'small') {
|
||||
size = size > 28 ? 28 : size;
|
||||
} else if (this.btnSize === 'mini') {
|
||||
size = size > 28 ? 24 : size;
|
||||
}
|
||||
return `${size}rpx`
|
||||
},
|
||||
getWidth() {
|
||||
//medium 400*84 / small 200*84/ mini 120 * 64
|
||||
let width = this.width;
|
||||
if (this.btnSize && this.btnSize !== true) {
|
||||
width = {
|
||||
'medium': '400rpx',
|
||||
'small': '200rpx',
|
||||
'mini': '120rpx'
|
||||
} [this.btnSize] || width
|
||||
}
|
||||
return width
|
||||
},
|
||||
getHeight() {
|
||||
let height = this.height || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.height) || '96rpx'
|
||||
if (this.btnSize && this.btnSize !== true) {
|
||||
height = {
|
||||
'medium': '84rpx',
|
||||
'small': '72rpx',
|
||||
'mini': '64rpx'
|
||||
} [this.btnSize] || height
|
||||
}
|
||||
return height
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
getBorderRadius() {
|
||||
let radius = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.radius) || '16rpx'
|
||||
radius = this.radius || radius || '0'
|
||||
if (~radius.indexOf('rpx')) {
|
||||
radius = (Number(radius.replace('rpx', '')) * 2) + 'rpx'
|
||||
} else if (~radius.indexOf('px')) {
|
||||
radius = (Number(radius.replace('px', '')) * 2) + 'px'
|
||||
} else if (~radius.indexOf('%')) {
|
||||
radius = (Number(radius.replace('%', '')) * 2) + '%'
|
||||
}
|
||||
return radius
|
||||
},
|
||||
// #endif
|
||||
getRadius() {
|
||||
const radius = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.radius) || '16rpx'
|
||||
return this.radius || radius
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true
|
||||
// #endif
|
||||
return {
|
||||
isNvue: isNvue,
|
||||
time: 0,
|
||||
trigger: false,
|
||||
pc: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// #ifdef H5
|
||||
this.pc = this.isPC()
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
handleStart(e) {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.disabled) return;
|
||||
this.trigger = false;
|
||||
if (new Date().getTime() - this.time <= 150) return;
|
||||
this.trigger = true;
|
||||
this.time = new Date().getTime();
|
||||
// #endif
|
||||
},
|
||||
handleClick() {
|
||||
if (this.disabled || !this.trigger) return;
|
||||
this.time = 0;
|
||||
},
|
||||
// #ifdef H5
|
||||
isPC() {
|
||||
if (typeof navigator !== 'object') return false;
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (var v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
// #endif
|
||||
handleTap() {
|
||||
if (this.disabled) return;
|
||||
this.$emit('click', {
|
||||
index: Number(this.index)
|
||||
});
|
||||
},
|
||||
handleEnd(e) {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.disabled) return;
|
||||
setTimeout(() => {
|
||||
this.time = 0;
|
||||
}, 150);
|
||||
// #endif
|
||||
},
|
||||
bindgetuserinfo({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('getuserinfo', detail);
|
||||
},
|
||||
bindcontact({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('contact', detail);
|
||||
},
|
||||
bindgetphonenumber({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('getphonenumber', detail);
|
||||
},
|
||||
binderror({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('error', detail);
|
||||
},
|
||||
bindopensetting({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('opensetting', detail);
|
||||
},
|
||||
bindchooseavatar({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('chooseavatar', detail);
|
||||
},
|
||||
bindlaunchapp({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('launchapp', detail);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-button__wrap {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
background: transparent !important;
|
||||
flex-direction: row;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button {
|
||||
border-width: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
border-style: solid;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-button__thin-border {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform-origin: 0 0;
|
||||
transform: scale(0.5, 0.5) translateZ(0);
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 32rpx;
|
||||
border-style: solid;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-button__flex-1 {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.fui-button__active-pc {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-button__opacity-pc:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fui-button__active-pc:active::after {
|
||||
content: ' ';
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2));
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
z-index: 2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-button__active {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.fui-button__active::after {
|
||||
content: ' ';
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2));
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
z-index: 2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-button__text {
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.fui-button__opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fui-text__bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-button__link {
|
||||
border-color: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-button__primary {
|
||||
border-color: var(--fui-color-primary, #465CFF) !important;
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
|
||||
.fui-button__success {
|
||||
border-color: var(--fui-color-success, #09BE4F) !important;
|
||||
background: var(--fui-color-success, #09BE4F) !important;
|
||||
}
|
||||
|
||||
.fui-button__warning {
|
||||
border-color: var(--fui-color-warning, #FFB703) !important;
|
||||
background: var(--fui-color-warning, #FFB703) !important;
|
||||
}
|
||||
|
||||
.fui-button__danger {
|
||||
border-color: var(--fui-color-danger, #FF2B2B) !important;
|
||||
background: var(--fui-color-danger, #FF2B2B) !important;
|
||||
}
|
||||
|
||||
.fui-button__purple {
|
||||
border-color: var(--fui-color-purple, #6831FF) !important;
|
||||
background: var(--fui-color-purple, #6831FF) !important;
|
||||
}
|
||||
|
||||
.fui-button__gray {
|
||||
border-color: var(--fui-bg-color-content, #F8F8F8) !important;
|
||||
background: var(--fui-bg-color-content, #F8F8F8) !important;
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
.fui-btn__gray-color {
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
906
components/firstui/fui-calendar/fui-calendar.vue
Normal file
906
components/firstui/fui-calendar/fui-calendar.vue
Normal file
@ -0,0 +1,906 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 4 072 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-calendar__wrap" :style="{width:dateWidth,background:background}">
|
||||
<view class="fui-calendar__header">
|
||||
<view class="fui-calendar__icon-left" :class="['fui-calendar__pl']" @tap.stop="changeYear(-1)">
|
||||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||||
</view>
|
||||
<view class="fui-calendar__icon-left" :class="['fui-calendar__pl']" @tap.stop="changeMonth(-1)"
|
||||
v-if="!isMultiple">
|
||||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||||
</view>
|
||||
<text class="fui-calendar__title"
|
||||
:style="{width:yearsWidth+'rpx',fontSize:yearsSize+'rpx',lineHeight:yearsSize+'rpx',color:yearsColor}">{{title}}</text>
|
||||
<view class="fui-calendar__pl" @tap.stop="changeMonth(1)" v-if="!isMultiple">
|
||||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||||
</view>
|
||||
<view class="fui-calendar__pl" @tap.stop="changeYear(1)">
|
||||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-calendar__date-header" :style="{borderBottomColor:lineColor}">
|
||||
<text class="fui-calendar__date" :style="{color:titleColor,width:itemWidth}" v-for="(item,index) in header"
|
||||
:key="index">{{item}}</text>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="fui-calendar__border" :style="{background:lineColor}"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<swiper :indicator-dots="false" :autoplay="false" :current="defCurrent" :duration="300" :vertical="vertical"
|
||||
@change="swiperChange" class="fui-calendar__swiper" style="height: 648rpx;" v-if="isMultiple">
|
||||
<swiper-item v-for="(item,index) in monthArr" :key="item.key">
|
||||
<view class="fui-calendar__date-wrap">
|
||||
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
|
||||
v-for="(week,i) in item.weekdayArr" :key="week"></view>
|
||||
<!--vue3中text嵌套text会出现警告和部分错误信息-->
|
||||
<view class="fui-calendar__date"
|
||||
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(index,idx),'fui-calendar__left-radius':_isRadius(index,idx,true),'fui-calendar__right-radius':_isRadius(index,idx)}"
|
||||
v-for="(sub,idx) in item.daysArr" :key="idx" @tap.stop="dateClick(index,sub)"
|
||||
:style="{background:getBackground(index,idx,values),width:itemWidth}">
|
||||
<text class="fui-calendar__date-val" :style="{color:getColor(index,idx,values)}">{{sub}}</text>
|
||||
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
|
||||
:style="{color:getColor(index,idx,values)}">{{getText(index,idx) || descrArr[idx]}}</text>
|
||||
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
|
||||
:style="{color:getColor(index,idx,values)}">{{getText(index,idx) || descrArr[idx]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="fui-calendar__swiper" v-else>
|
||||
<view class="fui-calendar__date-wrap">
|
||||
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
|
||||
v-for="(week,i) in singleMonth.weekdayArr" :key="week"></view>
|
||||
<!--vue3中text嵌套text会出现警告和部分错误信息-->
|
||||
<view class="fui-calendar__date"
|
||||
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(month-1,idx),'fui-calendar__left-radius':_isRadius(month-1,idx,true),'fui-calendar__right-radius':_isRadius(month-1,idx)}"
|
||||
v-for="(sub,idx) in singleMonth.daysArr" :key="idx" @tap.stop="dateClick(month-1,sub)"
|
||||
:style="{background:getBackground(month-1,idx,values),width:itemWidth}">
|
||||
<text class="fui-calendar__date-val" :style="{color:getColor(month-1,idx,values)}">{{sub}}</text>
|
||||
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
|
||||
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx) || descrArr[idx]}}</text>
|
||||
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
|
||||
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx) || descrArr[idx]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-calendar__btn-wrap" v-if="showBtn">
|
||||
<view class="fui-calendar__btn" :class="{'fui-calendar__diaabled':btnDisabled}"
|
||||
:style="{background:btnBackground || primaryColor}">
|
||||
<text class="fui-calendar__btn"
|
||||
:class="{'fui-calendar__btn-text':true,'fui-calendar__btn-active':!btnDisabled}"
|
||||
:style="{color:btnColor}" @tap.stop="handleClick">{{btnText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lunar from './index.js';
|
||||
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
||||
export default {
|
||||
name: "fui-calendar",
|
||||
emits: ['change', 'dateChange'],
|
||||
// components: {
|
||||
// fuiIcon
|
||||
// },
|
||||
props: {
|
||||
type: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
value: {
|
||||
type: [Array, String],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
//v2.0.0+ 最多可选天数，type=2 || type=3有效
|
||||
maxDays: {
|
||||
type: [Number, String],
|
||||
default: -1
|
||||
},
|
||||
minDate: {
|
||||
type: String,
|
||||
default: '2010-01-01'
|
||||
},
|
||||
maxDate: {
|
||||
type: String,
|
||||
default: '2030-12-31'
|
||||
},
|
||||
showLunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: 'cn'
|
||||
},
|
||||
isMultiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'roundright-fill'
|
||||
},
|
||||
arrowSize: {
|
||||
type: [Number, String],
|
||||
default: 40
|
||||
},
|
||||
arrowColor: {
|
||||
type: String,
|
||||
default: '#7F7F7F'
|
||||
},
|
||||
yearsWidth: {
|
||||
type: [Number, String],
|
||||
default: 200
|
||||
},
|
||||
yearsSize: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
yearsColor: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#EEEEEE'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
//选中日期背景色
|
||||
activeBackground: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
rangeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
rangeBackground: {
|
||||
type: String,
|
||||
default: '#F1F4FA'
|
||||
},
|
||||
start: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
end: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
isToday: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
btnText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
btnBackground: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
btnColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lang: [],
|
||||
header: [],
|
||||
monthArr: [],
|
||||
singleMonth: {
|
||||
weekdayArr: [],
|
||||
daysArr: []
|
||||
},
|
||||
descrArr: [],
|
||||
dateWidth: '100%',
|
||||
title: '',
|
||||
year: 0,
|
||||
month: 1,
|
||||
today: '',
|
||||
minArr: [],
|
||||
maxArr: [],
|
||||
values: [],
|
||||
defCurrent: 0,
|
||||
btnDisabled: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
initChange() {
|
||||
return `${this.type}-${this.minDate}-${this.maxDate}-${this.value}`;
|
||||
},
|
||||
itemWidth() {
|
||||
// #ifdef APP-NVUE
|
||||
return (Number(this.dateWidth.replace('px', '').replace('%','')) - 1) / 7 + 'px'
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
return '14.2857%'
|
||||
// #endif
|
||||
},
|
||||
primaryColor() {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
return (app && app.primary) || '#465CFF';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
width(val) {
|
||||
this.getWidth(val)
|
||||
},
|
||||
language(val) {
|
||||
this.setLang(val);
|
||||
},
|
||||
values(vals) {
|
||||
this._btnDisabled(vals);
|
||||
},
|
||||
initChange(vals) {
|
||||
this.init();
|
||||
},
|
||||
isMultiple(val) {
|
||||
if (!val) {
|
||||
this.singleMonth = this.monthArr[this.month - 1]
|
||||
}
|
||||
},
|
||||
title(val) {
|
||||
if (this.year === 0) return;
|
||||
this.descrArr = []
|
||||
this.$emit('dateChange', {
|
||||
year: this.year,
|
||||
month: this.month
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setLang(this.language);
|
||||
this.getWidth(this.width)
|
||||
this.init();
|
||||
this._btnDisabled(this.values);
|
||||
},
|
||||
methods: {
|
||||
_btnDisabled(vals) {
|
||||
if (this.type == 3 && vals.length < 2) {
|
||||
this.btnDisabled = true
|
||||
} else {
|
||||
this.btnDisabled = false
|
||||
}
|
||||
},
|
||||
setLang(val) {
|
||||
this.header = lunar.lang[`h_${val}`] || lunar.lang.h_cn
|
||||
this.setTitle()
|
||||
},
|
||||
getWidth(val) {
|
||||
//宽度值不宜太低
|
||||
let dw = Number(val);
|
||||
if (dw && dw >= 600) {
|
||||
dw = uni.upx2px(dw)
|
||||
} else {
|
||||
let sys = uni.getSystemInfoSync()
|
||||
dw = sys.windowWidth
|
||||
}
|
||||
// #ifndef APP-NVUE
|
||||
this.dateWidth = val ? dw + 'px' : '100%';
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.dateWidth = dw + 'px';
|
||||
// #endif
|
||||
},
|
||||
swiperChange(e) {
|
||||
let current = e.detail.current
|
||||
const month = current + 1
|
||||
this.month = month
|
||||
this.title = this.language === 'en' ? `${lunar.lang.m_en[month-1]} ${this.year}` :
|
||||
`${this.year}年${month}月`;
|
||||
},
|
||||
getLunar(month, day) {
|
||||
let obj = lunar.solarTolunar(this.year, month, day);
|
||||
return obj.IDayCn;
|
||||
},
|
||||
initDate(date) {
|
||||
if (!date || date === true || date === 'true') return '';
|
||||
let fdate = date.replace(/\-/g, '/').split('/');
|
||||
return [Number(fdate[0] || -1), Number(fdate[1] || -1), Number(fdate[2] || -1)]
|
||||
},
|
||||
formatNum(num) {
|
||||
num = Number(num)
|
||||
return num < 10 ? '0' + Math.abs(num) : num + '';
|
||||
},
|
||||
compareDate(arr) {
|
||||
if (!arr && arr.length === 0) return -1;
|
||||
let timestamp = []
|
||||
let indexs = {}
|
||||
arr.forEach((item, index) => {
|
||||
let d = item.replace(/\-/g, '/');
|
||||
d = `${d} 00:00:00`
|
||||
let stamp = new Date(d).getTime()
|
||||
timestamp.push(stamp)
|
||||
indexs[stamp.toString()] = index
|
||||
})
|
||||
let newArr = []
|
||||
while (timestamp.length > 0) {
|
||||
let min = Math.min(...timestamp)
|
||||
let index = indexs[min.toString()]
|
||||
newArr.push(arr[index])
|
||||
timestamp.splice(timestamp.indexOf(min), 1)
|
||||
}
|
||||
return newArr;
|
||||
},
|
||||
toArray(start, end) {
|
||||
return Array.from(new Array(end + 1).keys()).slice(start);
|
||||
},
|
||||
getMonthDay(year, month) {
|
||||
let days = new Date(year, month, 0).getDate();
|
||||
return days;
|
||||
},
|
||||
getWeekday(year, month) {
|
||||
let date = new Date(`${year}/${month}/01 00:00:00`);
|
||||
return date.getDay();
|
||||
},
|
||||
_isSection(date, start, end) {
|
||||
let ts = new Date(date.replace(/\-/g, '/')).getTime();
|
||||
let s = new Date(start.replace(/\-/g, '/')).getTime();
|
||||
let e = new Date(end.replace(/\-/g, '/')).getTime();
|
||||
return ts > s && ts < e;
|
||||
},
|
||||
getColor(index, idx, values) {
|
||||
let color = this.color;
|
||||
if (!values || values.length === 0) return color;
|
||||
let month = this.formatNum(index + 1);
|
||||
let day = this.formatNum(idx + 1);
|
||||
let date = `${this.year}-${month}-${day}`
|
||||
let type = this.type;
|
||||
if (type == 3) {
|
||||
if (~values.indexOf(date)) {
|
||||
color = this.activeColor
|
||||
} else if (values[1] && this._isSection(date, values[0], values[1])) {
|
||||
color = this.rangeColor || this.primaryColor
|
||||
}
|
||||
} else {
|
||||
if (~values.indexOf(date)) {
|
||||
color = this.activeColor
|
||||
}
|
||||
}
|
||||
return color
|
||||
},
|
||||
getBackground(index, idx, values) {
|
||||
let background = 'transparent';
|
||||
if (!values || values.length === 0) return background;
|
||||
let month = this.formatNum(index + 1);
|
||||
let day = this.formatNum(idx + 1);
|
||||
let date = `${this.year}-${month}-${day}`
|
||||
let type = this.type;
|
||||
if (type == 3) {
|
||||
if (~values.indexOf(date)) {
|
||||
background = this.activeBackground || this.primaryColor
|
||||
} else if (values[1] && this._isSection(date, values[0], values[1])) {
|
||||
background = this.rangeBackground
|
||||
}
|
||||
} else {
|
||||
if (~values.indexOf(date)) {
|
||||
background = this.activeBackground || this.primaryColor
|
||||
}
|
||||
}
|
||||
return background
|
||||
},
|
||||
getText(index, idx) {
|
||||
let month = index + 1
|
||||
let day = idx + 1
|
||||
let text = '';
|
||||
let date = `${this.year}-${this.formatNum(month)}-${this.formatNum(day)}`;
|
||||
if (this.type == 3) {
|
||||
let values = this.values
|
||||
if (values.length > 0) {
|
||||
if (values[0] == date && values[0] != values[1]) {
|
||||
let st = this.start;
|
||||
text = st && st !== 'true' && st !== true ? st : '';
|
||||
|
||||
} else if (values[1] == date) {
|
||||
let et = this.end;
|
||||
text = et && et !== 'true' && et !== true ? et : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!text && !this.descrArr[idx]) {
|
||||
text = this.showLunar ? this.getLunar(month, day) : ''
|
||||
if (this.isToday) {
|
||||
//今天 简繁同体
|
||||
let td = this.language === 'en' ? 'Today' : '今天'
|
||||
text = this.today === date ? td : text
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
_isRadius(index, idx, start) {
|
||||
let radius = this.type != 3 ? true : false;
|
||||
if (this.type == 3 && this.values && this.values.length > 0) {
|
||||
let month = index + 1
|
||||
let day = idx + 1
|
||||
let date = `${this.year}-${this.formatNum(month)}-${this.formatNum(day)}`;
|
||||
if (start) {
|
||||
radius = date === this.values[0]
|
||||
} else {
|
||||
radius = date === this.values[1]
|
||||
}
|
||||
}
|
||||
return radius;
|
||||
},
|
||||
getMonthsArr(year) {
|
||||
let monthArr = []
|
||||
for (let i = 0; i < 12; i++) {
|
||||
let month = i + 1;
|
||||
let daysArr = this.toArray(1, this.getMonthDay(year, month));
|
||||
let weekdayArr = this.toArray(1, this.getWeekday(year, month));
|
||||
weekdayArr = weekdayArr.map(item => {
|
||||
return `week_${i}_${item}`
|
||||
})
|
||||
monthArr.push({
|
||||
key: `m_${month}`,
|
||||
weekdayArr,
|
||||
daysArr
|
||||
})
|
||||
}
|
||||
return monthArr
|
||||
},
|
||||
_isDisAbled(index, idx) {
|
||||
let bool = false;
|
||||
let date = `${this.year}/${index+1}/${idx+1}`;
|
||||
let min = this.minArr.join('/')
|
||||
let max = this.maxArr.join('/')
|
||||
let ts = new Date(date).getTime();
|
||||
if (ts < new Date(min).getTime() || ts > new Date(max).getTime()) {
|
||||
bool = true;
|
||||
}
|
||||
return bool;
|
||||
},
|
||||
setTitle() {
|
||||
if (this.year === 0) return;
|
||||
this.title = this.language === 'en' ? `${lunar.lang.m_en[this.month-1]} ${this.year}` :
|
||||
`${this.year}年${this.month}月`
|
||||
},
|
||||
init() {
|
||||
const now = new Date();
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
let day = now.getDate();
|
||||
this.minArr = this.initDate(this.minDate) || [2010, 1, 1];
|
||||
this.maxArr = this.initDate(this.maxDate) || [2030, 12, 31];
|
||||
this.today = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`
|
||||
let value = this.value;
|
||||
let def = [-1]
|
||||
if (value && value.length > 0) {
|
||||
if (typeof value === 'string') {
|
||||
def = this.initDate(value) || [-1, -1, -1]
|
||||
value = [value]
|
||||
} else {
|
||||
const len = value.length
|
||||
if (len > 1) {
|
||||
value = this.compareDate(value)
|
||||
}
|
||||
if (this.type == 3 && value.length > 2) {
|
||||
value = [value[0], value[1]]
|
||||
}
|
||||
def = this.initDate(value[len - 1]) || [-1, -1, -1]
|
||||
if (def[0] !== -1) {
|
||||
year = def[0]
|
||||
month = def[1]
|
||||
}
|
||||
}
|
||||
value = value.map(item => {
|
||||
let arr = this.initDate(item)
|
||||
return `${arr[0]}-${this.formatNum(arr[1])}-${this.formatNum(arr[2])}`
|
||||
})
|
||||
this.values = value;
|
||||
} else {
|
||||
this.year = year;
|
||||
if (this._isDisAbled(month - 1, day - 1)) {
|
||||
year = this.maxArr[0]
|
||||
month = this.maxArr[1]
|
||||
}
|
||||
}
|
||||
this.year = year;
|
||||
this.month = month;
|
||||
this.setTitle()
|
||||
this.monthArr = this.getMonthsArr(year)
|
||||
if (!this.isMultiple) {
|
||||
this.singleMonth = this.monthArr[month - 1]
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.defCurrent = month - 1;
|
||||
}, 20)
|
||||
})
|
||||
}
|
||||
},
|
||||
checkYear(year) {
|
||||
if (year < this.minArr[0] || year > this.maxArr[0]) {
|
||||
uni.showToast({
|
||||
title: '日期已超出可切换范围！',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
changeMonth(num) {
|
||||
let month = num + this.month;
|
||||
let year = 0;
|
||||
if (num > 0) {
|
||||
year = month > 12 ? this.year + 1 : this.year;
|
||||
month = month > 12 ? 1 : month;
|
||||
} else {
|
||||
year = month < 1 ? this.year - 1 : this.year;
|
||||
month = month < 1 ? 12 : month;
|
||||
}
|
||||
if (this.checkYear(year)) {
|
||||
this.month = month;
|
||||
this.year = year;
|
||||
this.setTitle();
|
||||
this.monthArr = this.getMonthsArr(year)
|
||||
this.singleMonth = this.monthArr[this.month - 1]
|
||||
}
|
||||
},
|
||||
changeYear(num) {
|
||||
let year = num + this.year;
|
||||
if (this.checkYear(year)) {
|
||||
this.year = year;
|
||||
if (this.isMultiple) {
|
||||
this.month = 1;
|
||||
this.defCurrent = 0;
|
||||
}
|
||||
this.setTitle();
|
||||
this.monthArr = this.getMonthsArr(year)
|
||||
if (!this.isMultiple) {
|
||||
this.singleMonth = this.monthArr[this.month - 1]
|
||||
}
|
||||
}
|
||||
},
|
||||
getWeekText(date) {
|
||||
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
|
||||
let week = date.getDay();
|
||||
//英文
|
||||
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
if (this.language === 'en') {
|
||||
weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
}
|
||||
return weeks[week];
|
||||
},
|
||||
dateClick(index, day) {
|
||||
if (this.disabled) return;
|
||||
if (!this._isDisAbled(index, day - 1)) {
|
||||
let month = this.formatNum(index + 1);
|
||||
let date = `${this.year}-${month}-${this.formatNum(day)}`;
|
||||
let type = this.type;
|
||||
let values = [...this.values]
|
||||
if (type == 3) {
|
||||
let start = values[0]
|
||||
let sts = -1;
|
||||
if (start) {
|
||||
sts = new Date(start.replace(/\-/g, '/')).getTime()
|
||||
}
|
||||
let ets = new Date(date.replace(/\-/g, '/')).getTime()
|
||||
if (start && values.length === 1 && sts <= ets) {
|
||||
const dateMax = `${date} 23:59:59`
|
||||
const etsMill = new Date(dateMax.replace(/\-/g, '/')).getTime()
|
||||
const diff = etsMill - sts
|
||||
const diffDays = Math.ceil(diff / 1000 / 60 / 60 / 24)
|
||||
const maxDays = Number(this.maxDays)
|
||||
if ((maxDays && maxDays > 0 && diffDays > maxDays) || maxDays === 0) {
|
||||
uni.showToast({
|
||||
title: `最多可选${maxDays}天，当前已超出可选范围`,
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
values.push(date)
|
||||
} else {
|
||||
values = [date]
|
||||
}
|
||||
} else {
|
||||
let idx = values.indexOf(date)
|
||||
if (idx != -1) {
|
||||
values.splice(idx, 1)
|
||||
} else {
|
||||
const maxDays = Number(this.maxDays)
|
||||
if ((maxDays && maxDays > 0 && values.length >= maxDays) || maxDays === 0) {
|
||||
uni.showToast({
|
||||
title: `最多可选${maxDays}天`,
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (type == 2) {
|
||||
values.push(date)
|
||||
} else {
|
||||
values = [date]
|
||||
}
|
||||
}
|
||||
}
|
||||
this.values = values
|
||||
setTimeout(() => {
|
||||
if (!this.showBtn) {
|
||||
this._change()
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
_change() {
|
||||
let values = this.values
|
||||
let type = this.type;
|
||||
if (type == 3 && values.length < 2) return;
|
||||
let value = '';
|
||||
let week = '';
|
||||
let lunarArr = {};
|
||||
if (type == 1) {
|
||||
value = values[0] || ''
|
||||
if (value) {
|
||||
week = this.getWeekText(value)
|
||||
if (this.showLunar && this.language !== 'en') {
|
||||
let d = this.initDate(value)
|
||||
lunarArr = lunar.solarTolunar(d[0], d[1], d[2]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
value = values
|
||||
week = [];
|
||||
lunarArr = []
|
||||
value.forEach(item => {
|
||||
week.push(this.getWeekText(item))
|
||||
if (this.showLunar && this.language !== 'en') {
|
||||
let d = this.initDate(item)
|
||||
lunarArr.push(lunar.solarTolunar(d[0], d[1], d[2]))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.$emit('change', {
|
||||
value: value,
|
||||
week: week,
|
||||
today: this.today,
|
||||
lunar: lunarArr
|
||||
})
|
||||
},
|
||||
handleClick() {
|
||||
if (this.btnDisabled) return;
|
||||
this._change()
|
||||
},
|
||||
// 传入一个返回Promise的函数，设置当前日历数据描述
|
||||
//返回当前日历数据
|
||||
setDescr(callback) {
|
||||
const item = this.monthArr[this.month - 1]
|
||||
if (item && callback && typeof callback === 'function') {
|
||||
callback(this.year, this.month, item.daysArr).then(res => {
|
||||
this.descrArr = res
|
||||
}).catch(err => {
|
||||
this.descrArr = []
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-calendar__header {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.fui-calendar__title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.fui-calendar__icon-left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.fui-calendar__pl {
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.fui-calendar__pl:active {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.fui-calendar__date-header {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-bottom-width: 0;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12rpx 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-bottom-width: 0.5px;
|
||||
border-bottom-style: solid;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-calendar__border {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-calendar__date-wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 12rpx 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-calendar__date {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 14.2857%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-calendar__dh {
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
.fui-calendar__left-radius {
|
||||
border-top-left-radius: 8rpx;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fui-calendar__right-radius {
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fui-calendar__date-val {
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-calendar__date-lunar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
transform: scale(0.8);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fui-calendar__date-descr {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: block;
|
||||
/* #endif */
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scale(0.8);
|
||||
text-align: center;
|
||||
bottom: 8rpx;
|
||||
z-index: 2;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-calendar__swiper {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
height: 648rpx;
|
||||
}
|
||||
|
||||
.fui-calendar__diaabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.fui-calendar__btn-wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.fui-calendar__btn {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-calendar__btn-text {
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-calendar__btn-active:active {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
</style>
|
||||
580
components/firstui/fui-calendar/index.js
Normal file
580
components/firstui/fui-calendar/index.js
Normal file
@ -0,0 +1,580 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @公历转农历：solar2lunar(1987,11,01);
|
||||
* @农历转公历：lunar2solar(1987,09,10);
|
||||
*/
|
||||
let calendar = {
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0,
|
||||
0x055d2, //1900-1909
|
||||
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, //1910-1919
|
||||
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, //1920-1929
|
||||
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, //1930-1939
|
||||
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, //1940-1949
|
||||
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-1959
|
||||
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-1969
|
||||
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-1979
|
||||
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-1989
|
||||
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-1999
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-2009
|
||||
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-2019
|
||||
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-2029
|
||||
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-2039
|
||||
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049
|
||||
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-2059
|
||||
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-2069
|
||||
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-2079
|
||||
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-2089
|
||||
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-2099
|
||||
0x0d520
|
||||
], //2100
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan: ["\u7532", "\u4e59", "\u4e19", "\u4e01", "\u620a", "\u5df1", "\u5e9a", "\u8f9b", "\u58ec", "\u7678"],
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi: ["\u5b50", "\u4e11", "\u5bc5", "\u536f", "\u8fb0", "\u5df3", "\u5348", "\u672a", "\u7533", "\u9149",
|
||||
"\u620c",
|
||||
"\u4ea5"
|
||||
],
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals: ["\u9f20", "\u725b", "\u864e", "\u5154", "\u9f99", "\u86c7", "\u9a6c", "\u7f8a", "\u7334", "\u9e21",
|
||||
"\u72d7", "\u732a"
|
||||
],
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm: ["\u5c0f\u5bd2", "\u5927\u5bd2", "\u7acb\u6625", "\u96e8\u6c34", "\u60ca\u86f0", "\u6625\u5206",
|
||||
"\u6e05\u660e", "\u8c37\u96e8", "\u7acb\u590f", "\u5c0f\u6ee1", "\u8292\u79cd", "\u590f\u81f3",
|
||||
"\u5c0f\u6691",
|
||||
"\u5927\u6691", "\u7acb\u79cb", "\u5904\u6691", "\u767d\u9732", "\u79cb\u5206", "\u5bd2\u9732",
|
||||
"\u971c\u964d",
|
||||
"\u7acb\u51ac", "\u5c0f\u96ea", "\u5927\u96ea", "\u51ac\u81f3"
|
||||
],
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'
|
||||
],
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1: ["\u65e5", "\u4e00", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d",
|
||||
"\u5341"
|
||||
],
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2: ["\u521d", "\u5341", "\u5eff", "\u5345"],
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3: ["\u6b63", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341",
|
||||
"\u51ac",
|
||||
"\u814a"
|
||||
],
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:let count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays: function(y) {
|
||||
let i, sum = 348;
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) {
|
||||
sum += (calendar.lunarInfo[y - 1900] & i) ? 1 : 0;
|
||||
}
|
||||
return (sum + calendar.leapDays(y));
|
||||
},
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:let leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth: function(y) { //闰字编码 \u95f0
|
||||
return (calendar.lunarInfo[y - 1900] & 0xf);
|
||||
},
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:let leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays: function(y) {
|
||||
if (calendar.leapMonth(y)) {
|
||||
return ((calendar.lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
|
||||
}
|
||||
return (0);
|
||||
},
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:let MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays: function(y, m) {
|
||||
if (m > 12 || m < 1) {
|
||||
return -1
|
||||
} //月份参数从1至12，参数错误返回-1
|
||||
return ((calendar.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
|
||||
},
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:let solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays: function(y, m) {
|
||||
if (m > 12 || m < 1) {
|
||||
return -1
|
||||
} //若参数错误 返回-1
|
||||
let ms = m - 1;
|
||||
if (ms == 1) { //2月份的闰平规律测算后确认返回28或29
|
||||
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
|
||||
} else {
|
||||
return (calendar.solarMonth[ms]);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear: function(lYear) {
|
||||
let ganKey = (lYear - 3) % 10;
|
||||
let zhiKey = (lYear - 3) % 12;
|
||||
if (ganKey == 0) ganKey = 10; //如果余数为0则为最后一个天干
|
||||
if (zhiKey == 0) zhiKey = 12; //如果余数为0则为最后一个地支
|
||||
return calendar.Gan[ganKey - 1] + calendar.Zhi[zhiKey - 1];
|
||||
},
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro: function(cMonth, cDay) {
|
||||
let s =
|
||||
"\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
|
||||
let arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22];
|
||||
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + "\u5ea7"; //座
|
||||
},
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi: function(offset) {
|
||||
return calendar.Gan[offset % 10] + calendar.Zhi[offset % 12];
|
||||
},
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:let _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm: function(y, n) {
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1;
|
||||
}
|
||||
if (n < 1 || n > 24) {
|
||||
return -1;
|
||||
}
|
||||
let _table = calendar.sTermInfo[y - 1900];
|
||||
let _info = [
|
||||
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||
];
|
||||
let _calday = [
|
||||
_info[0].substr(0, 1),
|
||||
_info[0].substr(1, 2),
|
||||
_info[0].substr(3, 1),
|
||||
_info[0].substr(4, 2),
|
||||
_info[1].substr(0, 1),
|
||||
_info[1].substr(1, 2),
|
||||
_info[1].substr(3, 1),
|
||||
_info[1].substr(4, 2),
|
||||
_info[2].substr(0, 1),
|
||||
_info[2].substr(1, 2),
|
||||
_info[2].substr(3, 1),
|
||||
_info[2].substr(4, 2),
|
||||
_info[3].substr(0, 1),
|
||||
_info[3].substr(1, 2),
|
||||
_info[3].substr(3, 1),
|
||||
_info[3].substr(4, 2),
|
||||
_info[4].substr(0, 1),
|
||||
_info[4].substr(1, 2),
|
||||
_info[4].substr(3, 1),
|
||||
_info[4].substr(4, 2),
|
||||
_info[5].substr(0, 1),
|
||||
_info[5].substr(1, 2),
|
||||
_info[5].substr(3, 1),
|
||||
_info[5].substr(4, 2),
|
||||
];
|
||||
return parseInt(_calday[n - 1]);
|
||||
},
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:let cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth: function(m) { // 月 => \u6708
|
||||
if (m > 12 || m < 1) {
|
||||
return -1
|
||||
} //若参数错误 返回-1
|
||||
let s = calendar.nStr3[m - 1];
|
||||
s += "\u6708"; //加上月字
|
||||
return s;
|
||||
},
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:let cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay: function(d) { //日 => \u65e5
|
||||
let s;
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341';
|
||||
break;
|
||||
case 20:
|
||||
s = '\u4e8c\u5341';
|
||||
break;
|
||||
break;
|
||||
case 30:
|
||||
s = '\u4e09\u5341';
|
||||
break;
|
||||
break;
|
||||
default:
|
||||
s = calendar.nStr2[Math.floor(d / 10)];
|
||||
s += calendar.nStr1[d % 10];
|
||||
}
|
||||
return (s);
|
||||
},
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:let animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function(y) {
|
||||
return calendar.Animals[(y - 4) % 12]
|
||||
},
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar: function(y, m, d) { //参数区间1900.1.31~2100.12.31
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1;
|
||||
} //年份限定、上限
|
||||
if (y == 1900 && m == 1 && d < 31) {
|
||||
return -1;
|
||||
} //下限
|
||||
let objDate;
|
||||
if (!y) { //未传参 获得当天
|
||||
objDate = new Date();
|
||||
} else {
|
||||
objDate = new Date(y, parseInt(m) - 1, d)
|
||||
}
|
||||
let i, leap = 0,
|
||||
temp = 0;
|
||||
//修正ymd参数
|
||||
y = objDate.getFullYear();
|
||||
m = objDate.getMonth() + 1;
|
||||
d = objDate.getDate();
|
||||
let offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0,
|
||||
31)) /
|
||||
86400000;
|
||||
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||
temp = calendar.lYearDays(i);
|
||||
offset -= temp;
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp;
|
||||
i--;
|
||||
}
|
||||
//是否今天
|
||||
let isTodayObj = new Date(),
|
||||
isToday = false;
|
||||
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||
isToday = true;
|
||||
}
|
||||
//星期几
|
||||
let nWeek = objDate.getDay(),
|
||||
cWeek = calendar.nStr1[nWeek];
|
||||
if (nWeek == 0) {
|
||||
nWeek = 7;
|
||||
} //数字表示周几顺应天朝周一开始的惯例
|
||||
//农历年
|
||||
let year = i;
|
||||
leap = calendar.leapMonth(i); //闰哪个月
|
||||
let isLeap = false;
|
||||
//效验闰月
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
//闰月
|
||||
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||
--i;
|
||||
isLeap = true;
|
||||
temp = calendar.leapDays(year); //计算农历闰月天数
|
||||
} else {
|
||||
temp = calendar.monthDays(year, i); //计算农历普通月天数
|
||||
}
|
||||
//解除闰月
|
||||
if (isLeap == true && i == (leap + 1)) {
|
||||
isLeap = false;
|
||||
}
|
||||
offset -= temp;
|
||||
}
|
||||
if (offset == 0 && leap > 0 && i == leap + 1)
|
||||
if (isLeap) {
|
||||
isLeap = false;
|
||||
} else {
|
||||
isLeap = true;
|
||||
--i;
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp;
|
||||
--i;
|
||||
}
|
||||
//农历月
|
||||
let month = i;
|
||||
//农历日
|
||||
let day = offset + 1;
|
||||
//天干地支处理
|
||||
let sm = m - 1;
|
||||
let gzY = calendar.toGanZhiYear(year);
|
||||
//月柱 1900年1月小寒以前为 丙子月(60进制12)
|
||||
let firstNode = calendar.getTerm(year, (m * 2 - 1)); //返回当月「节」为几日开始
|
||||
let secondNode = calendar.getTerm(year, (m * 2)); //返回当月「节」为几日开始
|
||||
//依据12节气修正干支月
|
||||
let gzM = calendar.toGanZhi((y - 1900) * 12 + m + 11);
|
||||
if (d >= firstNode) {
|
||||
gzM = calendar.toGanZhi((y - 1900) * 12 + m + 12);
|
||||
}
|
||||
//传入的日期的节气与否
|
||||
let isTerm = false;
|
||||
let Term = null;
|
||||
if (firstNode == d) {
|
||||
isTerm = true;
|
||||
Term = calendar.solarTerm[m * 2 - 2];
|
||||
}
|
||||
if (secondNode == d) {
|
||||
isTerm = true;
|
||||
Term = calendar.solarTerm[m * 2 - 1];
|
||||
}
|
||||
//日柱 当月一日与 1900/1/1 相差天数
|
||||
let dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10;
|
||||
let gzD = calendar.toGanZhi(dayCyclical + d - 1);
|
||||
//该日期所属的星座
|
||||
let astro = calendar.toAstro(m, d);
|
||||
return {
|
||||
'lYear': year,
|
||||
'lMonth': month,
|
||||
'lDay': day,
|
||||
'Animal': calendar.getAnimal(year),
|
||||
'IMonthCn': (isLeap ? "\u95f0" : '') + calendar.toChinaMonth(month),
|
||||
'IDayCn': calendar.toChinaDay(day),
|
||||
'cYear': y,
|
||||
'cMonth': m,
|
||||
'cDay': d,
|
||||
'gzYear': gzY,
|
||||
'gzMonth': gzM,
|
||||
'gzDay': gzD,
|
||||
'isToday': isToday,
|
||||
'isLeap': isLeap,
|
||||
'nWeek': nWeek,
|
||||
'ncWeek': "\u661f\u671f" + cWeek,
|
||||
'isTerm': isTerm,
|
||||
'Term': Term,
|
||||
'astro': astro
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar: function(y, m, d, isLeapMonth) { //参数区间1900.1.31~2100.12.1
|
||||
isLeapMonth = !!isLeapMonth;
|
||||
let leapOffset = 0;
|
||||
let leapMonth = calendar.leapMonth(y);
|
||||
let leapDay = calendar.leapDays(y);
|
||||
if (isLeapMonth && (leapMonth != m)) {
|
||||
return -1;
|
||||
} //传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) {
|
||||
return -1;
|
||||
} //超出了最大极限值
|
||||
let day = calendar.monthDays(y, m);
|
||||
let _day = day;
|
||||
//bugFix 2016-9-25
|
||||
//if month is leap, _day use leapDays method
|
||||
if (isLeapMonth) {
|
||||
_day = calendar.leapDays(y, m);
|
||||
}
|
||||
if (y < 1900 || y > 2100 || d > _day) {
|
||||
return -1;
|
||||
} //参数合法性效验
|
||||
//计算农历的时间差
|
||||
let offset = 0;
|
||||
for (let i = 1900; i < y; i++) {
|
||||
offset += calendar.lYearDays(i);
|
||||
}
|
||||
let leap = 0,
|
||||
isAdd = false;
|
||||
for (let i = 1; i < m; i++) {
|
||||
leap = calendar.leapMonth(y);
|
||||
if (!isAdd) { //处理闰月
|
||||
if (leap <= i && leap > 0) {
|
||||
offset += calendar.leapDays(y);
|
||||
isAdd = true;
|
||||
}
|
||||
}
|
||||
offset += calendar.monthDays(y, i);
|
||||
}
|
||||
//转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if (isLeapMonth) {
|
||||
offset += day;
|
||||
}
|
||||
//1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
let stmap = Date.UTC(1900, 1, 30, 0, 0, 0);
|
||||
let calObj = new Date((offset + d - 31) * 86400000 + stmap);
|
||||
let cY = calObj.getUTCFullYear();
|
||||
let cM = calObj.getUTCMonth() + 1;
|
||||
let cD = calObj.getUTCDate();
|
||||
return calendar.solar2lunar(cY, cM, cD);
|
||||
}
|
||||
};
|
||||
|
||||
const lang = {
|
||||
m_cn: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
m_en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
h_cn: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
h_en: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
|
||||
}
|
||||
|
||||
export default {
|
||||
solarTolunar: calendar.solar2lunar,
|
||||
lunarTosolar: calendar.lunar2solar,
|
||||
lang: lang
|
||||
};
|
||||
326
components/firstui/fui-card/fui-card.vue
Normal file
326
components/firstui/fui-card/fui-card.vue
Normal file
@ -0,0 +1,326 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6140 7 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-card__wrap"
|
||||
:class="{'fui-card__full':full,'fui-card__border':showBorder,'fui-card__border-radius':showBorder && !isNvue && !full}"
|
||||
:style="{marginTop:margin[0] || 0,marginRight:full?0: (margin[1] || 0),marginBottom:margin[2] || margin[0] || 0,marginLeft:full?0:(margin[3] || margin[1] || 0),background:background,borderRadius:full?0:radius,'box-shadow':showBorder?'none':shadow,borderColor:isNvue?borderColor:'transparent'}"
|
||||
@tap="handleClick">
|
||||
<view class="fui-card__header" v-if="tag || title || src" :class="{'fui-card__header-line':headerLine}"
|
||||
:style="{'border-top-left-radius':full?0:radius,'border-top-right-radius':full?0:radius,'border-bottom-color':isNvue && headerLine?lineColor:'transparent',paddingTop:padding[0] || 0,paddingRight:padding[1]||0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:headerBackground}">
|
||||
<view class="fui-card__header-left">
|
||||
<image :src="src" class="fui-card__header-thumb" v-if="src"
|
||||
:style="{height:height+'rpx',width:width+'rpx',borderRadius:imageRadius}"></image>
|
||||
<text class="fui-card__header-title" :style="{fontSize:size+'rpx',color:color}"
|
||||
v-if="title">{{title}}</text>
|
||||
</view>
|
||||
<view class="fui-card__header-right" v-if="tag">
|
||||
<text :style="{fontSize:tagSize+'rpx',color:tagColor}">{{tag}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-card__body" :class="{'fui-card__header-line':footerLine}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="fui-card__footer"
|
||||
:style="{'border-bottom-left-radius':full?0:radius,'border-bottom-right-radius':full?0:radius}">
|
||||
<slot name="footer"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-card",
|
||||
emits: ['click'],
|
||||
props: {
|
||||
//card margin值：[上、右、下、左]
|
||||
margin: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['0', '32rpx']
|
||||
}
|
||||
},
|
||||
//是否通栏，为true时margin-left，margin-right失效
|
||||
full: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//card 背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//card 圆角，非nvue下showBorder为false时生效
|
||||
radius: {
|
||||
type: String,
|
||||
default: '16rpx'
|
||||
},
|
||||
//阴影：nvue下
|
||||
shadow: {
|
||||
type: String,
|
||||
default: '0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)'
|
||||
},
|
||||
//是否显示card 边框，为true时box-shadow失效
|
||||
showBorder: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//边框颜色，仅nvue下生效
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'red'
|
||||
},
|
||||
headerBackground: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//是否需要header底部线条
|
||||
headerLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否需要内容与footer之间线条
|
||||
footerLine: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//header 底部线条颜色，仅nvue有效，非nvue改变颜色使用css变量
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#EEEEEE'
|
||||
},
|
||||
//header padding值：[上、右、下、左]
|
||||
padding: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['20rpx', '20rpx']
|
||||
}
|
||||
},
|
||||
//头像，图标图片地址
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//图片宽度，单位rpx
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 64
|
||||
},
|
||||
//图片高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 64
|
||||
},
|
||||
//图片圆角
|
||||
imageRadius: {
|
||||
type: String,
|
||||
default: '8rpx'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#7F7F7F'
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tagSize: {
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
tagColor: {
|
||||
type: String,
|
||||
default: '#b2b2b2'
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false;
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true;
|
||||
// #endif
|
||||
return {
|
||||
isNvue
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click', {
|
||||
index: this.index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-card__wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-card__full {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-card__full::after {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-card__border {
|
||||
position: relative;
|
||||
box-shadow: none !important;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0.5px;
|
||||
border-style: solid;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-card__border-radius {
|
||||
border-radius: 16rpx !important;
|
||||
}
|
||||
|
||||
.fui-card__border::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 200%;
|
||||
border: 1px solid var(--fui-color-border, #EEEEEE);
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 32rpx;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-card__header {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-card__header-left {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fui-card__header-line {
|
||||
position: relative;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-bottom-width: 0.5px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #EEEEEE;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-card__header-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-card__header-thumb {
|
||||
/* #ifndef APP-NVUE */
|
||||
vertical-align: middle;
|
||||
/* #endif */
|
||||
margin-right: 20rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-card__header-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 380rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-card__header-right {
|
||||
text-align: right;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-card__body {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-card__footer {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
588
components/firstui/fui-cascader/fui-cascader.vue
Normal file
588
components/firstui/fui-cascader/fui-cascader.vue
Normal file
@ -0,0 +1,588 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 4072549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-cascader__wrap">
|
||||
<view class="fui-cascader__header-wrap">
|
||||
<scroll-view :scroll-x="true" scroll-with-animation :show-scrollbar="false" :scroll-into-view="scrollViewId"
|
||||
:style="{ background: headBackground }" class="fui-cascader__scroll">
|
||||
<view class="fui-cascader__header" :style="{ height: headHeight+'rpx'}">
|
||||
<view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr"
|
||||
:key="idx" @tap.stop="swichTabs(idx)">
|
||||
<text class="fui-cascader__header-text"
|
||||
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !getActiveColor}"
|
||||
:style="{ color: idx === current ? getActiveColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
|
||||
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!getActiveColor}"
|
||||
:style="{ background: getActiveColor }" v-if="idx === current && showLine"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="fui-cascader__border" :style="{background:borderColor}" v-if="showBorder"></view>
|
||||
</view>
|
||||
<!-- #ifdef MP-TOUTIAO -->
|
||||
<view :style="{ height: height+'rpx', background: background}">
|
||||
<swiper class="fui-cascader__list" :current="defCurrent" :circular="false" :duration="300"
|
||||
@change="switchTab" :style="{ height: height+'rpx', background: background}" v-if="isShow">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-TOUTIAO -->
|
||||
<swiper class="fui-cascader__list" :current="defCurrent" :circular="false" :duration="300"
|
||||
@change="switchTab" :style="{ height: height+'rpx', background: background}">
|
||||
<!-- #endif -->
|
||||
<swiper-item v-for="(item, index) in selectedArr" :key="index">
|
||||
<scroll-view :show-scrollbar="false" scroll-y :scroll-into-view="item.scrollViewId"
|
||||
class="fui-cascader__item-scroll" :style="{ height: height+'rpx', background: background }">
|
||||
<view class="fui-cascader__seat"></view>
|
||||
<view class="fui-cascader__cell" :id="`fui_c_${subi}`" v-for="(sub, subi) in item.data"
|
||||
:key="subi" @tap.stop="change(index, subi, sub)">
|
||||
<view class="fui-cascader__checkmark"
|
||||
:class="{'fui-cascader__icon-border':!getActiveColor}"
|
||||
:style="{borderBottomColor:checkMarkColor || getActiveColor,borderRightColor:checkMarkColor || getActiveColor}"
|
||||
v-if="item.index === subi"></view>
|
||||
<image :src="sub.src" v-if="sub.src" class="fui-cascader__img"
|
||||
:style="{ width: imgWidth+'rpx', height: imgHeight+'rpx', borderRadius: radius+'rpx' }">
|
||||
</image>
|
||||
<text class="fui-cascader__text"
|
||||
:style="{ color: item.index === subi ? textActiveColor : textColor, fontSize: textSize + 'rpx',fontWeight:item.index === subi?'bold':'normal' }">{{ sub.text }}</text>
|
||||
</view>
|
||||
<view class="fui-cascader__seat"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- #ifdef MP-TOUTIAO -->
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-cascader",
|
||||
emits: ['change', 'complete'],
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
defaultKey: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
stepLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#eee'
|
||||
},
|
||||
headHeight: {
|
||||
type: [Number, String],
|
||||
default: 88
|
||||
},
|
||||
headBackground: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 28
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
//选中颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 600
|
||||
},
|
||||
//item swiper 内容部分背景颜色
|
||||
background: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
checkMarkColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
imgWidth: {
|
||||
type: [Number, String],
|
||||
default: 48
|
||||
},
|
||||
imgHeight: {
|
||||
type: [Number, String],
|
||||
default: 48
|
||||
},
|
||||
radius: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
textSize: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
textActiveColor: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getActiveColor() {
|
||||
let color = this.activeColor;
|
||||
// #ifdef APP-NVUE
|
||||
if (!color || color === true) {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
color = (app && app.primary) || '#465CFF';
|
||||
}
|
||||
// #endif
|
||||
return color;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
defCurrent: 0,
|
||||
selectedArr: [],
|
||||
scrollViewId: 'fui_cr__0',
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
options(vals) {
|
||||
this.setDefaultOptions(this.value);
|
||||
},
|
||||
value(vals) {
|
||||
this.setDefaultOptions(vals)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setDefaultOptions(this.value)
|
||||
},
|
||||
methods: {
|
||||
//重置选择，暴露给用户使用
|
||||
reset() {
|
||||
this.initData(this.options, -1);
|
||||
},
|
||||
//设置请求返回数据，暴露给用户使用（分级加载数据）
|
||||
setRequestData(data, layer) {
|
||||
this.subLevelData(data, layer)
|
||||
},
|
||||
//无子级数据，选择结束
|
||||
end(layer) {
|
||||
this.subLevelData([], layer)
|
||||
},
|
||||
subLevelData(data, layer) {
|
||||
if (!data || data.length === 0) {
|
||||
if (layer == -1) return;
|
||||
let arr = this.selectedArr;
|
||||
if (layer < arr.length - 1) {
|
||||
let newArr = arr.slice(0, layer + 1);
|
||||
this.selectedArr = newArr;
|
||||
}
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.isShow = false
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.isShow = true
|
||||
}, 10)
|
||||
})
|
||||
// #endif
|
||||
let result = JSON.parse(JSON.stringify(this.selectedArr));
|
||||
let lastItem = result[result.length - 1] || {};
|
||||
let text = [];
|
||||
let value = [];
|
||||
let src = [];
|
||||
result.map(item => {
|
||||
text.push(item.text);
|
||||
value.push(item.value)
|
||||
src.push(item.src)
|
||||
delete item['data'];
|
||||
delete item['index'];
|
||||
delete item['scrollViewId'];
|
||||
return item;
|
||||
});
|
||||
this.$emit('complete', {
|
||||
result: result,
|
||||
value: value,
|
||||
text: text,
|
||||
src: src
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.scrollViewId = `fui_cr_${layer}`;
|
||||
}, 50)
|
||||
} else {
|
||||
let item = [{
|
||||
text: this.text,
|
||||
value: '',
|
||||
src: '',
|
||||
index: -1,
|
||||
scrollViewId: 'fui_c__0',
|
||||
data
|
||||
}];
|
||||
if (layer == -1) {
|
||||
this.selectedArr = item;
|
||||
} else {
|
||||
let retainArr = this.selectedArr.slice(0, layer + 1) || [];
|
||||
this.selectedArr = retainArr.concat(item);
|
||||
}
|
||||
let current = this.selectedArr.length - 1;
|
||||
if (current >= this.current) {
|
||||
this.defCurrent = this.current
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.defCurrent = current;
|
||||
this.current = current;
|
||||
this.scrollViewId = `fui_cr_${this.current > 1?this.current - 1:0}`;
|
||||
}, 50)
|
||||
});
|
||||
}
|
||||
},
|
||||
getDefaultIndex(arr, val) {
|
||||
if (!arr || arr.length === 0 || val === undefined) return -1;
|
||||
let key = this.defaultKey || 'value';
|
||||
let index = -1;
|
||||
for (let i = 0, len = arr.length; i < len; i++) {
|
||||
if (arr[i][key] == val) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return index;
|
||||
},
|
||||
removeChildren(data) {
|
||||
let list = data.map(item => {
|
||||
delete item['children'];
|
||||
return item;
|
||||
});
|
||||
return list;
|
||||
},
|
||||
getItemList(layer, index, selectedArr) {
|
||||
let list = [];
|
||||
let arr = JSON.parse(JSON.stringify(this.options));
|
||||
selectedArr = selectedArr || this.selectedArr
|
||||
if (layer == -1) {
|
||||
list = this.removeChildren(arr);
|
||||
} else {
|
||||
let subi = selectedArr[0].index;
|
||||
subi = subi === undefined || subi == -1 ? index : subi;
|
||||
if (arr[subi] && arr[subi].children) {
|
||||
list = arr[subi].children
|
||||
}
|
||||
if (layer > 0) {
|
||||
for (let i = 1; i < layer + 1; i++) {
|
||||
let val = layer === i ? index : selectedArr[i].index;
|
||||
list = val === -1 ? [] : (list[val].children || []);
|
||||
if (list.length === 0) break;
|
||||
}
|
||||
}
|
||||
list = this.removeChildren(list);
|
||||
}
|
||||
return list;
|
||||
},
|
||||
setDefaultOptions(vals) {
|
||||
let options = this.options || []
|
||||
if (!options || options.length === 0) return;
|
||||
vals = vals || [];
|
||||
let selectedArr = []
|
||||
if (vals.length > 0) {
|
||||
//分级加载
|
||||
if (this.stepLoading) {
|
||||
options.forEach((item, index) => {
|
||||
let subi = this.getDefaultIndex(item, vals[index])
|
||||
let obj = item[subi] || {}
|
||||
selectedArr.push({
|
||||
text: obj.text || this.text,
|
||||
value: obj.value || '',
|
||||
src: obj.src || '',
|
||||
index: subi,
|
||||
scrollViewId: `fui_c_${subi}`,
|
||||
data: item
|
||||
})
|
||||
})
|
||||
} else {
|
||||
let subi = -1
|
||||
for (let j = 0, len = vals.length; j < len; j++) {
|
||||
let item = vals[j]
|
||||
let list = []
|
||||
let obj = {}
|
||||
if (j === 0) {
|
||||
list = this.getItemList(-1)
|
||||
} else {
|
||||
list = this.getItemList(j - 1, subi, selectedArr)
|
||||
}
|
||||
subi = this.getDefaultIndex(list, item)
|
||||
if (subi !== -1) {
|
||||
obj = list[subi]
|
||||
}
|
||||
selectedArr.push({
|
||||
text: obj.text || this.text,
|
||||
value: obj.value || '',
|
||||
src: obj.src || '',
|
||||
index: subi,
|
||||
scrollViewId: `fui_c_${subi}`,
|
||||
data: list
|
||||
})
|
||||
if (subi === -1) break;
|
||||
}
|
||||
}
|
||||
this.selectedArr = selectedArr;
|
||||
this.defCurrent = this.current;
|
||||
let current = selectedArr.length - 1;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.defCurrent = current;
|
||||
this.current = current;
|
||||
this.checkTabs();
|
||||
}, 30)
|
||||
});
|
||||
} else {
|
||||
this.initData(options, -1);
|
||||
}
|
||||
},
|
||||
initData(data, layer) {
|
||||
if (!data || data.length === 0) return;
|
||||
if (this.stepLoading) {
|
||||
if (Array.isArray(data[0])) {
|
||||
data = data[0]
|
||||
}
|
||||
this.subLevelData(data, layer);
|
||||
} else {
|
||||
this.subLevelData(this.getItemList(layer, -1), layer);
|
||||
}
|
||||
},
|
||||
swichTabs(current) {
|
||||
if (this.current != current) {
|
||||
this.defCurrent = this.current;
|
||||
setTimeout(() => {
|
||||
this.defCurrent = current;
|
||||
this.current = current;
|
||||
}, 30)
|
||||
}
|
||||
},
|
||||
checkTabs() {
|
||||
let current = this.current;
|
||||
let item = this.selectedArr[current] || {};
|
||||
item.scrollViewId = 'fui_c__0';
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
let index = Number(item.index)
|
||||
let val = index < 2 ? 0 : index - 2;
|
||||
item.scrollViewId = `fui_c_${val}`;
|
||||
}, 30);
|
||||
});
|
||||
this.scrollViewId = `fui_cr_${current > 1?current - 1:0}`;
|
||||
},
|
||||
switchTab(e) {
|
||||
this.current = e.detail.current;
|
||||
this.checkTabs();
|
||||
},
|
||||
change(index, subi, sub) {
|
||||
let item = this.selectedArr[index];
|
||||
if (item.index == subi) return;
|
||||
item.index = subi;
|
||||
item.text = sub.text;
|
||||
item.value = sub.value;
|
||||
item.src = sub.src || '';
|
||||
this.$emit('change', {
|
||||
layer: index,
|
||||
index: subi,
|
||||
...sub
|
||||
});
|
||||
if (!this.stepLoading) {
|
||||
let data = this.getItemList(index, subi);
|
||||
this.subLevelData(data, index);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-cascader__wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-cascader__scroll {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-cascader__header-wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-cascader__header {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.fui-cascader__header-item {
|
||||
padding: 24rpx 32rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-cascader__header-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fui-cascader__hi-width {
|
||||
width: 240rpx;
|
||||
}
|
||||
|
||||
.fui-cascader__header-line {
|
||||
height: 6rpx;
|
||||
border-radius: 4rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 32rpx;
|
||||
right: 32rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fui-cascader__border {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 0.5px;
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 100%;
|
||||
z-index: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-cascader__list {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-cascader__seat {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.fui-cascader__cell {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 20rpx 32rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-cascader__checkmark {
|
||||
width: 24rpx;
|
||||
height: 48rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-color: #FFFFFF;
|
||||
border-right-style: solid;
|
||||
border-right-width: 3px;
|
||||
border-right-color: #FFFFFF;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
transform: rotate(45deg) scale(0.5) translateZ(0);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(45deg) scale(0.5);
|
||||
/* #endif */
|
||||
transform-origin: 54% 48%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.fui-cascader__img {
|
||||
margin-right: 16rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-cascader__color {
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
.fui-cascader__bg {
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
.fui-cascader__icon-border {
|
||||
border-bottom-color: var(--fui-color-primary, #465CFF) !important;
|
||||
border-right-color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
102
components/firstui/fui-checkbox-group/fui-checkbox-group.vue
Normal file
102
components/firstui/fui-checkbox-group/fui-checkbox-group.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 4 0725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
|
||||
<checkbox-group :name="name">
|
||||
<slot></slot>
|
||||
</checkbox-group>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
|
||||
<fui-form-field :name="name" v-model="vals">
|
||||
<slot></slot>
|
||||
</fui-form-field>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-checkbox-group",
|
||||
emits: ['change', 'input', 'update:modelValue'],
|
||||
// #ifdef MP-WEIXIN
|
||||
behaviors: ['wx://form-field-group'],
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU || MP-QQ || H5
|
||||
behaviors: ['uni://form-field'],
|
||||
// #endif
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
value: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vals: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// #ifdef VUE3
|
||||
modelValue(vals) {
|
||||
this.modelChange(vals)
|
||||
},
|
||||
// #endif
|
||||
value(vals) {
|
||||
this.modelChange(vals)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.childrens = []
|
||||
},
|
||||
methods: {
|
||||
checkboxChange(e) {
|
||||
this.$emit('change', e)
|
||||
// TODO vue2 兼容
|
||||
this.$emit('input', e.detail.value)
|
||||
// TODO vue3 兼容
|
||||
// #ifdef VUE3
|
||||
this.$emit("update:modelValue", e.detail.value);
|
||||
// #endif
|
||||
},
|
||||
changeValue(checked, target) {
|
||||
let vals = []
|
||||
this.childrens.forEach(item => {
|
||||
if (item.val) {
|
||||
vals.push(item.value);
|
||||
}
|
||||
})
|
||||
this.vals = vals;
|
||||
let e = {
|
||||
detail: {
|
||||
value: vals
|
||||
}
|
||||
}
|
||||
this.checkboxChange(e)
|
||||
},
|
||||
modelChange(vals) {
|
||||
this.childrens.forEach(item => {
|
||||
if (vals.includes(item.value)) {
|
||||
item.val = true;
|
||||
} else {
|
||||
item.val = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
241
components/firstui/fui-checkbox/fui-checkbox.vue
Normal file
241
components/firstui/fui-checkbox/fui-checkbox.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-checkbox__input"
|
||||
:class="{'fui-checkbox__disabled':disabled,'fui-checkbox__color':!getColor && val && !isCheckMark}"
|
||||
:style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}"
|
||||
@tap.stop="checkboxChange">
|
||||
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
|
||||
v-if="val"></view>
|
||||
<checkbox class="fui-checkbox__hidden" style="opacity: 0;position: absolute;" :color="getColor"
|
||||
:disabled="disabled" :value="value" :checked="val">
|
||||
</checkbox>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-checkbox",
|
||||
emits: ['change'],
|
||||
// #ifdef MP-WEIXIN
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
// #endif
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//checkbox选中背景颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//checkbox未选中时边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#ccc'
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '40px'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '50%'
|
||||
},
|
||||
// #endif
|
||||
//是否只展示对号，无边框背景
|
||||
isCheckMark: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//对号颜色
|
||||
checkMarkColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
scaleRatio: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.val = this.checked;
|
||||
this.group = this.getParent()
|
||||
if (this.group) {
|
||||
this.group.childrens.push(this);
|
||||
if (this.group.value && this.group.value.length > 0) {
|
||||
this.val = this.group.value.includes(this.value)
|
||||
}
|
||||
// #ifdef VUE3
|
||||
if (this.group.modelValue && this.group.modelValue.length > 0) {
|
||||
this.val = this.group.modelValue.includes(this.value)
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
this.label = this.getParent('fui-label')
|
||||
if (this.label) {
|
||||
this.label.childrens.push(this);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checked(newVal) {
|
||||
this.val = newVal;
|
||||
},
|
||||
val(newVal) {
|
||||
if (this.group) {
|
||||
this.group.changeValue(this.val, this);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
let color = this.color;
|
||||
// #ifdef APP-NVUE
|
||||
if (!color || color === true) {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
color = (app && app.primary) || '#465CFF';
|
||||
}
|
||||
// #endif
|
||||
return color;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false;
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true;
|
||||
// #endif
|
||||
return {
|
||||
val: false,
|
||||
isNvue: isNvue
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getBackgroundColor(val, isCheckMark) {
|
||||
let color = val ? this.getColor : '#fff'
|
||||
if (isCheckMark) {
|
||||
color = 'transparent'
|
||||
}
|
||||
return color;
|
||||
},
|
||||
getBorderColor(val, isCheckMark) {
|
||||
let color = val ? this.getColor : this.borderColor;
|
||||
if (isCheckMark) {
|
||||
color = 'transparent'
|
||||
}
|
||||
return color;
|
||||
},
|
||||
checkboxChange(e) {
|
||||
if (this.disabled) return;
|
||||
this.val = !this.val;
|
||||
this.$emit('change', {
|
||||
checked: this.val,
|
||||
value: this.value
|
||||
})
|
||||
},
|
||||
getParent(name = 'fui-checkbox-group') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
labelClick() {
|
||||
this.checkboxChange()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-checkbox__input {
|
||||
font-size: 0;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-radius: 40rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-checkbox__color {
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
border-color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-check__mark {
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-color: #FFFFFF;
|
||||
border-right-style: solid;
|
||||
border-right-width: 3px;
|
||||
border-right-color: #FFFFFF;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
transform: rotate(45deg) scale(0.5) translateZ(0);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(45deg) scale(0.5);
|
||||
/* #endif */
|
||||
transform-origin: 54% 48%;
|
||||
}
|
||||
|
||||
.fui-checkbox__hidden {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0 none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
pointer-events: none;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 100wx;
|
||||
height: 100wx;
|
||||
border-width: 0;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fui-checkbox__disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
339
components/firstui/fui-circle/fui-circle.vue
Normal file
339
components/firstui/fui-circle/fui-circle.vue
Normal file
@ -0,0 +1,339 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-circle__wrap" :style="{width: w+'px',height:w+'px'}">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<gcanvas :ref="circleId" :style="{ width: w + 'px', height: w + 'px' }"></gcanvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-VUE || H5 -->
|
||||
<canvas :start="percentage" :change:start="parse.init" :width="w" :change:width="parse.widthChange"
|
||||
:sw="strokeWidth" :change:sw="parse.widthChange" :data-width="w" :data-sw="strokeWidth" :data-lc="lineCap"
|
||||
:data-size="size" :data-percent="percentage" :data-color="color || primaryColor" :data-show="show"
|
||||
:data-ds="defaultShow" :data-background="background" :data-foreground="foreground || primaryColor"
|
||||
:data-gradient="gradient" :data-sa="sAngle" :data-ccw="counterclockwise" :data-speed="speed"
|
||||
:data-am="activeMode" :data-cid="circleId" :canvas-id="circleId" :class="[circleId]"
|
||||
:style="{width: w + 'px',height: w + 'px'}"></canvas>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId"
|
||||
:style="{width: w*4 +'px',height:w*4 +'px'}"></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<!-- 此处加v-if是因为vue3下编译到头条/抖音等小程序动态id失效，需等uni-app官方调整 -->
|
||||
<canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId" :style="{width: w +'px',height:w +'px'}"
|
||||
v-if="circleId"></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<view class="fui-circle__inner">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #ifdef APP-VUE || H5 -->
|
||||
<script module="parse" lang="renderjs">
|
||||
export default {
|
||||
methods: {
|
||||
widthChange(w, oldW, owner, ins) {
|
||||
let res = ins.getDataset();
|
||||
let percent = Number(res.percent);
|
||||
this.init(percent, percent, owner, ins)
|
||||
},
|
||||
init(percent, oldPercent, owner, ins) {
|
||||
let state = ins.getState();
|
||||
let res = ins.getDataset();
|
||||
const am = this.format(res.am);
|
||||
let start = am === 'backwards' ? 0 : (state.start || 0);
|
||||
start = start > percent ? 0 : start;
|
||||
if (!state.context || !state.canvas) {
|
||||
const width = res.width;
|
||||
let ele = `.${res.cid}>canvas`
|
||||
const canvas = document.querySelectorAll(this.format(ele))[0];
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
state.context = ctx;
|
||||
state.canvas = canvas;
|
||||
this.drawCircle(start, ctx, canvas, percent, res, state, owner);
|
||||
} else {
|
||||
this.drawCircle(start, state.context, state.canvas, percent, res, state, owner);
|
||||
}
|
||||
},
|
||||
drawDefaultCircle(ctx, canvas, res) {
|
||||
let sa = Number(res.sa) * Math.PI
|
||||
let eAngle = Math.PI * 2 + sa;
|
||||
this.drawArc(ctx, eAngle, this.format(res.background), res);
|
||||
},
|
||||
drawPercent(ctx, percent, res) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = this.format(res.color);
|
||||
ctx.font = res.size + "px Arial";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
let radius = res.width / 2;
|
||||
percent = this.bool(res.ccw) ? 100 - percent : percent;
|
||||
ctx.fillText(percent + '%', radius, radius);
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
},
|
||||
drawCircle(start, ctx, canvas, percent, res, state, owner) {
|
||||
if (!ctx || !canvas) return;
|
||||
let _this = this
|
||||
let gradient = res.foreground;
|
||||
if (this.format(res.gradient)) {
|
||||
gradient = ctx.createLinearGradient(0, 0, Number(res.width), 0);
|
||||
gradient.addColorStop(0, this.format(res.gradient));
|
||||
gradient.addColorStop(1, this.format(res.foreground));
|
||||
}
|
||||
let requestId = null
|
||||
let renderLoop = () => {
|
||||
drawFrame((res) => {
|
||||
if (res) {
|
||||
requestId = requestAnimationFrame(renderLoop)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
cancelAnimationFrame(requestId)
|
||||
requestId = null;
|
||||
renderLoop = null;
|
||||
}, 20)
|
||||
}
|
||||
})
|
||||
}
|
||||
renderLoop()
|
||||
|
||||
function drawFrame(callback) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.width);
|
||||
if (_this.bool(res.ds)) {
|
||||
_this.drawDefaultCircle(ctx, canvas, res)
|
||||
}
|
||||
if (_this.bool(res.show)) {
|
||||
_this.drawPercent(ctx, start, res);
|
||||
}
|
||||
let isEnd = percent === 0 || (_this.bool(res.ccw) && start === 100);
|
||||
if (!isEnd) {
|
||||
let sa = Number(res.sa) * Math.PI
|
||||
let eAngle = ((2 * Math.PI) / 100) * start + sa;
|
||||
_this.drawArc(ctx, eAngle, gradient, res);
|
||||
}
|
||||
owner.callMethod('change', {
|
||||
percent: start
|
||||
})
|
||||
if (start >= percent) {
|
||||
state.start = start;
|
||||
owner.callMethod('end', {
|
||||
canvasId: _this.format(res.cid)
|
||||
})
|
||||
callback && callback(false)
|
||||
} else {
|
||||
let num = start + Number(res.speed)
|
||||
start = num > percent ? percent : num;
|
||||
callback && callback(true)
|
||||
}
|
||||
}
|
||||
},
|
||||
//创建弧线
|
||||
drawArc(ctx, eAngle, strokeStyle, res) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = this.format(res.lc);
|
||||
ctx.lineWidth = Number(res.sw);
|
||||
ctx.strokeStyle = strokeStyle;
|
||||
let radius = res.width / 2;
|
||||
let sa = Number(res.sa) * Math.PI
|
||||
ctx.arc(radius, radius, radius - Number(res.sw), sa, eAngle, this.bool(res.ccw));
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.restore();
|
||||
},
|
||||
format(str) {
|
||||
if (!str) return str;
|
||||
return str.replace(/\"/g, "");
|
||||
},
|
||||
bool(str) {
|
||||
return str === 'true' || str == true ? true : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- #endif -->
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
import {
|
||||
enable,
|
||||
WeexBridge
|
||||
} from './gcanvas/index.js';
|
||||
// #endif
|
||||
//注意：app-nvue端canvas性能不如app-vue
|
||||
import mpjs from './mpjs.js'
|
||||
import render from './render.js'
|
||||
import nvue from './nvue.js'
|
||||
// #ifdef MP-WEIXIN
|
||||
const circleId = `fui_cc_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
// #endif
|
||||
export default {
|
||||
name: "fui-circle",
|
||||
mixins: [mpjs, render, nvue],
|
||||
emits: ['change', 'end'],
|
||||
props: {
|
||||
//进度百分比 0~100
|
||||
percent: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 120
|
||||
},
|
||||
//背景填充颜色，仅nvue ios有效
|
||||
fillStyle: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
//进度环的宽度，单位 px
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 4
|
||||
},
|
||||
//进度环的线头样式，可选值为 square、round、butt
|
||||
lineCap: {
|
||||
type: String,
|
||||
default: 'round'
|
||||
},
|
||||
//圆环进度字体大小,px
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 12
|
||||
},
|
||||
//圆环进度字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//是否显示进度文字
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//默认背景颜色
|
||||
background: {
|
||||
type: String,
|
||||
default: '#CCCCCC'
|
||||
},
|
||||
//是否显示默认背景色
|
||||
defaultShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//默认前景颜色
|
||||
foreground: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//进度条渐变颜色，结合foreground使用
|
||||
gradient: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//起始弧度，单位弧度 实际 Math.PI * sAngle
|
||||
sAngle: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
//指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针
|
||||
counterclockwise: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//动画执行速度，值越大动画越快（1~100）
|
||||
speed: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
//backwards: 动画从头播；forwards：动画从上次结束点接着播
|
||||
activeMode: {
|
||||
type: String,
|
||||
default: 'forwards'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
width(val) {
|
||||
this.initWidth(val)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
primaryColor() {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
return (app && app.primary) || '#465CFF';
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// #ifndef MP-WEIXIN
|
||||
const circleId = `fui_cc_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
// #endif
|
||||
return {
|
||||
circleId: circleId,
|
||||
w: 60
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// #ifdef APP-NVUE
|
||||
this.context = null
|
||||
// #endif
|
||||
this.initWidth(this.width)
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
mounted() {
|
||||
//以下代码写在nvue.js中 android端可能会出现canvas大小不受控制
|
||||
setTimeout(() => {
|
||||
let ganvas = this.$refs[this.circleId];
|
||||
let canvas = enable(ganvas, {
|
||||
bridge: WeexBridge
|
||||
});
|
||||
this.context = canvas.getContext('2d');
|
||||
}, 50);
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
initWidth(val) {
|
||||
val = uni.upx2px(Number(val) || 120)
|
||||
this.w = val % 2 === 0 ? val : val + 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-circle__wrap {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fui-circle__inner {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* #ifdef MP */
|
||||
.fui-circle__canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
/* #ifdef MP-ALIPAY */
|
||||
zoom: 0.25;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
242
components/firstui/fui-circle/gcanvas/bridge/bridge-weex.js
Normal file
242
components/firstui/fui-circle/gcanvas/bridge/bridge-weex.js
Normal file
@ -0,0 +1,242 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 140 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const isWeex = typeof WXEnvironment !== 'undefined';
|
||||
const isWeexIOS = isWeex && /ios/i.test(WXEnvironment.platform);
|
||||
const isWeexAndroid = isWeex && !isWeexIOS;
|
||||
|
||||
import GLmethod from '../context-webgl/GLmethod';
|
||||
|
||||
const GCanvasModule =
|
||||
(typeof weex !== 'undefined' && weex.requireModule) ? (weex.requireModule('gcanvas')) :
|
||||
(typeof __weex_require__ !== 'undefined') ? (__weex_require__('@weex-module/gcanvas')) : {};
|
||||
|
||||
let isDebugging = false;
|
||||
|
||||
let isComboDisabled = false;
|
||||
|
||||
const logCommand = (function () {
|
||||
const methodQuery = [];
|
||||
Object.keys(GLmethod).forEach(key => {
|
||||
methodQuery[GLmethod[key]] = key;
|
||||
})
|
||||
const queryMethod = (id) => {
|
||||
return methodQuery[parseInt(id)] || 'NotFoundMethod';
|
||||
}
|
||||
const logCommand = (id, cmds) => {
|
||||
const mId = cmds.split(',')[0];
|
||||
const mName = queryMethod(mId);
|
||||
console.log(`=== callNative - componentId:${id}; method: ${mName}; cmds: ${cmds}`);
|
||||
}
|
||||
return logCommand;
|
||||
})();
|
||||
|
||||
function joinArray(arr, sep) {
|
||||
let res = '';
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (i !== 0) {
|
||||
res += sep;
|
||||
}
|
||||
res += arr[i];
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
const commandsCache = {}
|
||||
|
||||
const GBridge = {
|
||||
|
||||
callEnable: (ref, configArray) => {
|
||||
|
||||
commandsCache[ref] = [];
|
||||
|
||||
return GCanvasModule.enable({
|
||||
componentId: ref,
|
||||
config: configArray
|
||||
});
|
||||
},
|
||||
|
||||
callEnableDebug: () => {
|
||||
isDebugging = true;
|
||||
},
|
||||
|
||||
callEnableDisableCombo: () => {
|
||||
isComboDisabled = true;
|
||||
},
|
||||
|
||||
callSetContextType: function (componentId, context_type) {
|
||||
GCanvasModule.setContextType(context_type, componentId);
|
||||
},
|
||||
|
||||
callReset: function(id){
|
||||
GCanvasModule.resetComponent && canvasModule.resetComponent(componentId);
|
||||
},
|
||||
|
||||
render: isWeexIOS ? function (componentId) {
|
||||
return GCanvasModule.extendCallNative({
|
||||
contextId: componentId,
|
||||
type: 0x60000001
|
||||
});
|
||||
} : function (componentId) {
|
||||
return callGCanvasLinkNative(componentId, 0x60000001, 'render');
|
||||
},
|
||||
|
||||
render2d: isWeexIOS ? function (componentId, commands, callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
GCanvasModule.render([commands, callback?true:false], componentId, callback);
|
||||
|
||||
} : function (componentId, commands,callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
callGCanvasLinkNative(componentId, 0x20000001, commands);
|
||||
if(callback){
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
callExtendCallNative: isWeexIOS ? function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
} : function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
},
|
||||
|
||||
|
||||
flushNative: isWeexIOS ? function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = GCanvasModule.extendCallNative({
|
||||
"contextId": componentId,
|
||||
"type": 0x60000000,
|
||||
"args": cmdArgs
|
||||
});
|
||||
|
||||
const res = result && result.result;
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + res);
|
||||
}
|
||||
|
||||
return res;
|
||||
|
||||
} : function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = callGCanvasLinkNative(componentId, 0x60000000, cmdArgs);
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + result);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
callNative: function (componentId, cmdArgs, cache) {
|
||||
|
||||
if (isDebugging) {
|
||||
logCommand(componentId, cmdArgs);
|
||||
}
|
||||
|
||||
commandsCache[componentId].push(cmdArgs);
|
||||
|
||||
if (!cache || isComboDisabled) {
|
||||
return GBridge.flushNative(componentId);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
|
||||
texImage2D(componentId, ...args) {
|
||||
if (isWeexIOS) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 6 + ',' + target + ',' + level + ',' + internalformat + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 9 + ',' + target + ',' + level + ',' + internalformat + ',' + width + ',' + height + ',' + border + ',' +
|
||||
+ format + ',' + type + ',' + (image ? image.src : 0)
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, format, type, image.src);
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, width, height, border, format, type, (image ? image.src : 0));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image) {
|
||||
if (isWeexIOS) {
|
||||
if (arguments.length === 8) {
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texSubImage2D + ',' + 6 + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset, + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
GCanvasModule.texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image.src);
|
||||
}
|
||||
},
|
||||
|
||||
bindImageTexture(componentId, src, imageId) {
|
||||
GCanvasModule.bindImageTexture([src, imageId], componentId);
|
||||
},
|
||||
|
||||
perloadImage([url, id], callback) {
|
||||
GCanvasModule.preLoadImage([url, id], function (image) {
|
||||
image.url = url;
|
||||
image.id = id;
|
||||
callback(image);
|
||||
});
|
||||
},
|
||||
|
||||
measureText(text, fontStyle, componentId) {
|
||||
return GCanvasModule.measureText([text, fontStyle], componentId);
|
||||
},
|
||||
|
||||
getImageData (componentId, x, y, w, h, callback) {
|
||||
GCanvasModule.getImageData([x, y,w,h],componentId,callback);
|
||||
},
|
||||
|
||||
putImageData (componentId, data, x, y, w, h, callback) {
|
||||
GCanvasModule.putImageData([x, y,w,h,data],componentId,callback);
|
||||
},
|
||||
|
||||
toTempFilePath(componentId, x, y, width, height, destWidth, destHeight, fileType, quality, callback){
|
||||
GCanvasModule.toTempFilePath([x, y, width,height, destWidth, destHeight, fileType, quality], componentId, callback);
|
||||
}
|
||||
}
|
||||
|
||||
export default GBridge;
|
||||
@ -0,0 +1,19 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 4 0 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStyleLinearGradient {
|
||||
|
||||
constructor(x0, y0, x1, y1) {
|
||||
this._start_pos = { _x: x0, _y: y0 };
|
||||
this._end_pos = { _x: x1, _y: y1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop = function (pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleLinearGradient;
|
||||
@ -0,0 +1,9 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 07 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStylePattern {
|
||||
constructor(img, pattern) {
|
||||
this._style = pattern;
|
||||
this._img = img;
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStylePattern;
|
||||
@ -0,0 +1,18 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 07 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
class FillStyleRadialGradient {
|
||||
constructor(x0, y0, r0, x1, y1, r1) {
|
||||
this._start_pos = { _x: x0, _y: y0, _r: r0 };
|
||||
this._end_pos = { _x: x1, _y: y1, _r: r1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop(pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleRadialGradient;
|
||||
@ -0,0 +1,667 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 14072 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import FillStylePattern from './FillStylePattern';
|
||||
import FillStyleLinearGradient from './FillStyleLinearGradient';
|
||||
import FillStyleRadialGradient from './FillStyleRadialGradient';
|
||||
import GImage from '../env/image.js';
|
||||
import {
|
||||
ArrayBufferToBase64,
|
||||
Base64ToUint8ClampedArray
|
||||
} from '../env/tool.js';
|
||||
|
||||
export default class CanvasRenderingContext2D {
|
||||
|
||||
_drawCommands = '';
|
||||
|
||||
_globalAlpha = 1.0;
|
||||
|
||||
_fillStyle = 'rgb(0,0,0)';
|
||||
_strokeStyle = 'rgb(0,0,0)';
|
||||
|
||||
_lineWidth = 1;
|
||||
_lineCap = 'butt';
|
||||
_lineJoin = 'miter';
|
||||
|
||||
_miterLimit = 10;
|
||||
|
||||
_globalCompositeOperation = 'source-over';
|
||||
|
||||
_textAlign = 'start';
|
||||
_textBaseline = 'alphabetic';
|
||||
|
||||
_font = '10px sans-serif';
|
||||
|
||||
_savedGlobalAlpha = [];
|
||||
|
||||
timer = null;
|
||||
componentId = null;
|
||||
|
||||
_notCommitDrawImageCache = [];
|
||||
_needRedrawImageCache = [];
|
||||
_redrawCommands = '';
|
||||
_autoSaveContext = true;
|
||||
// _imageMap = new GHashMap();
|
||||
// _textureMap = new GHashMap();
|
||||
|
||||
constructor() {
|
||||
this.className = 'CanvasRenderingContext2D';
|
||||
//this.save()
|
||||
}
|
||||
|
||||
setFillStyle(value) {
|
||||
this.fillStyle = value;
|
||||
}
|
||||
|
||||
set fillStyle(value) {
|
||||
this._fillStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("F" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
const image = value._img;
|
||||
if (!image.complete) {
|
||||
image.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
|
||||
//CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get fillStyle() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
|
||||
get globalAlpha() {
|
||||
return this._globalAlpha;
|
||||
}
|
||||
|
||||
setGlobalAlpha(value) {
|
||||
this.globalAlpha = value;
|
||||
}
|
||||
|
||||
set globalAlpha(value) {
|
||||
this._globalAlpha = value;
|
||||
this._drawCommands = this._drawCommands.concat("a" + value.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
|
||||
get strokeStyle() {
|
||||
return this._strokeStyle;
|
||||
}
|
||||
|
||||
setStrokeStyle(value) {
|
||||
this.strokeStyle = value;
|
||||
}
|
||||
|
||||
set strokeStyle(value) {
|
||||
|
||||
this._strokeStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("S" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y + ",".toFixed(2) + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get lineWidth() {
|
||||
return this._lineWidth;
|
||||
}
|
||||
|
||||
setLineWidth(value) {
|
||||
this.lineWidth = value;
|
||||
}
|
||||
|
||||
set lineWidth(value) {
|
||||
this._lineWidth = value;
|
||||
this._drawCommands = this._drawCommands.concat("W" + value + ";");
|
||||
}
|
||||
|
||||
get lineCap() {
|
||||
return this._lineCap;
|
||||
}
|
||||
|
||||
setLineCap(value) {
|
||||
this.lineCap = value;
|
||||
}
|
||||
|
||||
set lineCap(value) {
|
||||
this._lineCap = value;
|
||||
this._drawCommands = this._drawCommands.concat("C" + value + ";");
|
||||
}
|
||||
|
||||
get lineJoin() {
|
||||
return this._lineJoin;
|
||||
}
|
||||
|
||||
setLineJoin(value) {
|
||||
this.lineJoin = value
|
||||
}
|
||||
|
||||
set lineJoin(value) {
|
||||
this._lineJoin = value;
|
||||
this._drawCommands = this._drawCommands.concat("J" + value + ";");
|
||||
}
|
||||
|
||||
get miterLimit() {
|
||||
return this._miterLimit;
|
||||
}
|
||||
|
||||
setMiterLimit(value) {
|
||||
this.miterLimit = value
|
||||
}
|
||||
|
||||
set miterLimit(value) {
|
||||
this._miterLimit = value;
|
||||
this._drawCommands = this._drawCommands.concat("M" + value + ";");
|
||||
}
|
||||
|
||||
get globalCompositeOperation() {
|
||||
return this._globalCompositeOperation;
|
||||
}
|
||||
|
||||
set globalCompositeOperation(value) {
|
||||
|
||||
this._globalCompositeOperation = value;
|
||||
let mode = 0;
|
||||
switch (value) {
|
||||
case "source-over":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-atop":
|
||||
mode = 5;
|
||||
break;
|
||||
case "source-in":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-out":
|
||||
mode = 2;
|
||||
break;
|
||||
case "destination-over":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-atop":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-in":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-out":
|
||||
mode = 3;
|
||||
break;
|
||||
case "lighter":
|
||||
mode = 1;
|
||||
break;
|
||||
case "copy":
|
||||
mode = 2;
|
||||
break;
|
||||
case "xor":
|
||||
mode = 6;
|
||||
break;
|
||||
default:
|
||||
mode = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("B" + mode + ";");
|
||||
}
|
||||
|
||||
get textAlign() {
|
||||
return this._textAlign;
|
||||
}
|
||||
|
||||
setTextAlign(value) {
|
||||
this.textAlign = value
|
||||
}
|
||||
|
||||
set textAlign(value) {
|
||||
|
||||
this._textAlign = value;
|
||||
let Align = 0;
|
||||
switch (value) {
|
||||
case "start":
|
||||
Align = 0;
|
||||
break;
|
||||
case "end":
|
||||
Align = 1;
|
||||
break;
|
||||
case "left":
|
||||
Align = 2;
|
||||
break;
|
||||
case "center":
|
||||
Align = 3;
|
||||
break;
|
||||
case "right":
|
||||
Align = 4;
|
||||
break;
|
||||
default:
|
||||
Align = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("A" + Align + ";");
|
||||
}
|
||||
|
||||
get textBaseline() {
|
||||
return this._textBaseline;
|
||||
}
|
||||
|
||||
setTextBaseline(value) {
|
||||
this.textBaseline = value
|
||||
}
|
||||
|
||||
set textBaseline(value) {
|
||||
this._textBaseline = value;
|
||||
let baseline = 0;
|
||||
switch (value) {
|
||||
case "alphabetic":
|
||||
baseline = 0;
|
||||
break;
|
||||
case "middle":
|
||||
baseline = 1;
|
||||
break;
|
||||
case "top":
|
||||
baseline = 2;
|
||||
break;
|
||||
case "hanging":
|
||||
baseline = 3;
|
||||
break;
|
||||
case "bottom":
|
||||
baseline = 4;
|
||||
break;
|
||||
case "ideographic":
|
||||
baseline = 5;
|
||||
break;
|
||||
default:
|
||||
baseline = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("E" + baseline + ";");
|
||||
}
|
||||
|
||||
get font() {
|
||||
return this._font;
|
||||
}
|
||||
|
||||
setFontSize(size) {
|
||||
var str = this._font;
|
||||
var strs = str.trim().split(/\s+/);
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
var values = ["normal", "italic", "oblique", "normal", "small-caps", "normal", "bold",
|
||||
"bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900",
|
||||
"normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
|
||||
"semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
|
||||
];
|
||||
|
||||
if (-1 == values.indexOf(strs[i].trim())) {
|
||||
if (typeof size === 'string') {
|
||||
strs[i] = size;
|
||||
} else if (typeof size === 'number') {
|
||||
strs[i] = String(size) + 'px';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.font = strs.join(" ");
|
||||
}
|
||||
|
||||
set font(value) {
|
||||
this._font = value;
|
||||
this._drawCommands = this._drawCommands.concat("j" + value + ";");
|
||||
}
|
||||
|
||||
setTransform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("t" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
transform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("f" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx + "," + ty + ";");
|
||||
}
|
||||
|
||||
resetTransform() {
|
||||
this._drawCommands = this._drawCommands.concat("m;");
|
||||
}
|
||||
|
||||
scale(a, d) {
|
||||
this._drawCommands = this._drawCommands.concat("k" + a.toFixed(2) + "," +
|
||||
d.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
rotate(angle) {
|
||||
this._drawCommands = this._drawCommands
|
||||
.concat("r" + angle.toFixed(6) + ";");
|
||||
}
|
||||
|
||||
translate(tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("l" + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
save() {
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._drawCommands = this._drawCommands.concat("v;");
|
||||
}
|
||||
|
||||
restore() {
|
||||
this._drawCommands = this._drawCommands.concat("e;");
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
}
|
||||
|
||||
createPattern(img, pattern) {
|
||||
if (typeof img === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = img;
|
||||
img = imgObj;
|
||||
}
|
||||
return new FillStylePattern(img, pattern);
|
||||
}
|
||||
|
||||
createLinearGradient(x0, y0, x1, y1) {
|
||||
return new FillStyleLinearGradient(x0, y0, x1, y1);
|
||||
}
|
||||
|
||||
createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
|
||||
return new FillStyleRadialGradient(x0, y0, r0, x1, y1, r1);
|
||||
};
|
||||
|
||||
createCircularGradient = function(x0, y0, r0) {
|
||||
return new FillStyleRadialGradient(x0, y0, 0, x0, y0, r0);
|
||||
};
|
||||
|
||||
strokeRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("s" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
|
||||
clearRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("c" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
clip() {
|
||||
this._drawCommands = this._drawCommands.concat("p;");
|
||||
}
|
||||
|
||||
resetClip() {
|
||||
this._drawCommands = this._drawCommands.concat("q;");
|
||||
}
|
||||
|
||||
closePath() {
|
||||
this._drawCommands = this._drawCommands.concat("o;");
|
||||
}
|
||||
|
||||
moveTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("g" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
lineTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("i" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
quadraticCurveTo = function(cpx, cpy, x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("u" + cpx + "," + cpy + "," + x + "," + y + ";");
|
||||
}
|
||||
|
||||
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, ) {
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"z" + cp1x.toFixed(2) + "," + cp1y.toFixed(2) + "," + cp2x.toFixed(2) + "," + cp2y.toFixed(2) + "," +
|
||||
x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
arcTo(x1, y1, x2, y2, radius) {
|
||||
this._drawCommands = this._drawCommands.concat("h" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + radius + ";");
|
||||
}
|
||||
|
||||
beginPath() {
|
||||
this._drawCommands = this._drawCommands.concat("b;");
|
||||
}
|
||||
|
||||
|
||||
fillRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("n" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
rect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("w" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
fill() {
|
||||
this._drawCommands = this._drawCommands.concat("L;");
|
||||
}
|
||||
|
||||
stroke(path) {
|
||||
this._drawCommands = this._drawCommands.concat("x;");
|
||||
}
|
||||
|
||||
arc(x, y, radius, startAngle, endAngle, anticlockwise) {
|
||||
|
||||
let ianticlockwise = 0;
|
||||
if (anticlockwise) {
|
||||
ianticlockwise = 1;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"y" + x.toFixed(2) + "," + y.toFixed(2) + "," +
|
||||
radius.toFixed(2) + "," + startAngle + "," + endAngle + "," + ianticlockwise +
|
||||
";"
|
||||
);
|
||||
}
|
||||
|
||||
fillText(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("T" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
strokeText = function(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("U" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
measureText(text) {
|
||||
return CanvasRenderingContext2D.GBridge.measureText(text, this.font, this.componentId);
|
||||
}
|
||||
|
||||
isPointInPath = function(x, y) {
|
||||
throw new Error('GCanvas not supported yet');
|
||||
}
|
||||
|
||||
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
if (typeof image === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = image;
|
||||
image = imgObj;
|
||||
}
|
||||
if (image instanceof GImage) {
|
||||
if (!image.complete) {
|
||||
imgObj.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
var srcArgs = [image, sx, sy, sw, sh, dx, dy, dw, dh];
|
||||
var args = [];
|
||||
for (var arg in srcArgs) {
|
||||
if (typeof(srcArgs[arg]) != 'undefined') {
|
||||
args.push(srcArgs[arg]);
|
||||
}
|
||||
}
|
||||
this.__drawImage.apply(this, args);
|
||||
//this.__drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh);
|
||||
}
|
||||
}
|
||||
|
||||
__drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
const numArgs = arguments.length;
|
||||
|
||||
function drawImageCommands() {
|
||||
|
||||
if (numArgs === 3) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + image.width + "," + image.height + ";");
|
||||
} else if (numArgs === 5) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
const width = parseInt(sw) || image.width;
|
||||
const height = parseInt(sh) || image.height;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + width + "," + height + ";");
|
||||
} else if (numArgs === 9) {
|
||||
sx = parseFloat(sx) || 0.0;
|
||||
sy = parseFloat(sy) || 0.0;
|
||||
sw = parseInt(sw) || image.width;
|
||||
sh = parseInt(sh) || image.height;
|
||||
dx = parseFloat(dx) || 0.0;
|
||||
dy = parseFloat(dy) || 0.0;
|
||||
dw = parseInt(dw) || image.width;
|
||||
dh = parseInt(dh) || image.height;
|
||||
|
||||
return ("d" + image._id + "," +
|
||||
sx + "," + sy + "," + sw + "," + sh + "," +
|
||||
dx + "," + dy + "," + dw + "," + dh + ";");
|
||||
}
|
||||
}
|
||||
this._drawCommands += drawImageCommands();
|
||||
}
|
||||
|
||||
_flush(reserve, callback) {
|
||||
const commands = this._drawCommands;
|
||||
this._drawCommands = '';
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
this._needRender = false;
|
||||
}
|
||||
|
||||
_redrawflush(reserve, callback) {
|
||||
const commands = this._redrawCommands;
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
if (this._needRedrawImageCache.length == 0) {
|
||||
this._redrawCommands = '';
|
||||
}
|
||||
}
|
||||
|
||||
draw(reserve, callback) {
|
||||
if (!reserve) {
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._redrawCommands = this._drawCommands;
|
||||
this._needRedrawImageCache = this._notCommitDrawImageCache;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
} else {
|
||||
this._drawCommands = ("e;X;v;" + this._drawCommands);
|
||||
}
|
||||
} else {
|
||||
this._needRedrawImageCache = this._needRedrawImageCache.concat(this._notCommitDrawImageCache);
|
||||
this._redrawCommands += this._drawCommands;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache = [];
|
||||
if (this._flush) {
|
||||
this._flush(reserve, callback);
|
||||
}
|
||||
}
|
||||
|
||||
getImageData(x, y, w, h, callback) {
|
||||
CanvasRenderingContext2D.GBridge.getImageData(this.componentId, x, y, w, h, function(res) {
|
||||
res.data = Base64ToUint8ClampedArray(res.data);
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
putImageData(data, x, y, w, h, callback) {
|
||||
if (data instanceof Uint8ClampedArray) {
|
||||
data = ArrayBufferToBase64(data);
|
||||
CanvasRenderingContext2D.GBridge.putImageData(this.componentId, data, x, y, w, h, function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toTempFilePath(x, y, width, height, destWidth, destHeight, fileType, quality, callback) {
|
||||
CanvasRenderingContext2D.GBridge.toTempFilePath(this.componentId, x, y, width, height, destWidth, destHeight,
|
||||
fileType, quality,
|
||||
function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 1 40 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default class WebGLActiveInfo {
|
||||
className = 'WebGLActiveInfo';
|
||||
|
||||
constructor({
|
||||
type, name, size
|
||||
}) {
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.size = size;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 4 0 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLBuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 40 7 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLFrameBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLFramebuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
299
components/firstui/fui-circle/gcanvas/context-webgl/GLenum.js
Normal file
299
components/firstui/fui-circle/gcanvas/context-webgl/GLenum.js
Normal file
@ -0,0 +1,299 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 40725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default {
|
||||
"DEPTH_BUFFER_BIT": 256,
|
||||
"STENCIL_BUFFER_BIT": 1024,
|
||||
"COLOR_BUFFER_BIT": 16384,
|
||||
"POINTS": 0,
|
||||
"LINES": 1,
|
||||
"LINE_LOOP": 2,
|
||||
"LINE_STRIP": 3,
|
||||
"TRIANGLES": 4,
|
||||
"TRIANGLE_STRIP": 5,
|
||||
"TRIANGLE_FAN": 6,
|
||||
"ZERO": 0,
|
||||
"ONE": 1,
|
||||
"SRC_COLOR": 768,
|
||||
"ONE_MINUS_SRC_COLOR": 769,
|
||||
"SRC_ALPHA": 770,
|
||||
"ONE_MINUS_SRC_ALPHA": 771,
|
||||
"DST_ALPHA": 772,
|
||||
"ONE_MINUS_DST_ALPHA": 773,
|
||||
"DST_COLOR": 774,
|
||||
"ONE_MINUS_DST_COLOR": 775,
|
||||
"SRC_ALPHA_SATURATE": 776,
|
||||
"FUNC_ADD": 32774,
|
||||
"BLEND_EQUATION": 32777,
|
||||
"BLEND_EQUATION_RGB": 32777,
|
||||
"BLEND_EQUATION_ALPHA": 34877,
|
||||
"FUNC_SUBTRACT": 32778,
|
||||
"FUNC_REVERSE_SUBTRACT": 32779,
|
||||
"BLEND_DST_RGB": 32968,
|
||||
"BLEND_SRC_RGB": 32969,
|
||||
"BLEND_DST_ALPHA": 32970,
|
||||
"BLEND_SRC_ALPHA": 32971,
|
||||
"CONSTANT_COLOR": 32769,
|
||||
"ONE_MINUS_CONSTANT_COLOR": 32770,
|
||||
"CONSTANT_ALPHA": 32771,
|
||||
"ONE_MINUS_CONSTANT_ALPHA": 32772,
|
||||
"BLEND_COLOR": 32773,
|
||||
"ARRAY_BUFFER": 34962,
|
||||
"ELEMENT_ARRAY_BUFFER": 34963,
|
||||
"ARRAY_BUFFER_BINDING": 34964,
|
||||
"ELEMENT_ARRAY_BUFFER_BINDING": 34965,
|
||||
"STREAM_DRAW": 35040,
|
||||
"STATIC_DRAW": 35044,
|
||||
"DYNAMIC_DRAW": 35048,
|
||||
"BUFFER_SIZE": 34660,
|
||||
"BUFFER_USAGE": 34661,
|
||||
"CURRENT_VERTEX_ATTRIB": 34342,
|
||||
"FRONT": 1028,
|
||||
"BACK": 1029,
|
||||
"FRONT_AND_BACK": 1032,
|
||||
"TEXTURE_2D": 3553,
|
||||
"CULL_FACE": 2884,
|
||||
"BLEND": 3042,
|
||||
"DITHER": 3024,
|
||||
"STENCIL_TEST": 2960,
|
||||
"DEPTH_TEST": 2929,
|
||||
"SCISSOR_TEST": 3089,
|
||||
"POLYGON_OFFSET_FILL": 32823,
|
||||
"SAMPLE_ALPHA_TO_COVERAGE": 32926,
|
||||
"SAMPLE_COVERAGE": 32928,
|
||||
"NO_ERROR": 0,
|
||||
"INVALID_ENUM": 1280,
|
||||
"INVALID_VALUE": 1281,
|
||||
"INVALID_OPERATION": 1282,
|
||||
"OUT_OF_MEMORY": 1285,
|
||||
"CW": 2304,
|
||||
"CCW": 2305,
|
||||
"LINE_WIDTH": 2849,
|
||||
"ALIASED_POINT_SIZE_RANGE": 33901,
|
||||
"ALIASED_LINE_WIDTH_RANGE": 33902,
|
||||
"CULL_FACE_MODE": 2885,
|
||||
"FRONT_FACE": 2886,
|
||||
"DEPTH_RANGE": 2928,
|
||||
"DEPTH_WRITEMASK": 2930,
|
||||
"DEPTH_CLEAR_VALUE": 2931,
|
||||
"DEPTH_FUNC": 2932,
|
||||
"STENCIL_CLEAR_VALUE": 2961,
|
||||
"STENCIL_FUNC": 2962,
|
||||
"STENCIL_FAIL": 2964,
|
||||
"STENCIL_PASS_DEPTH_FAIL": 2965,
|
||||
"STENCIL_PASS_DEPTH_PASS": 2966,
|
||||
"STENCIL_REF": 2967,
|
||||
"STENCIL_VALUE_MASK": 2963,
|
||||
"STENCIL_WRITEMASK": 2968,
|
||||
"STENCIL_BACK_FUNC": 34816,
|
||||
"STENCIL_BACK_FAIL": 34817,
|
||||
"STENCIL_BACK_PASS_DEPTH_FAIL": 34818,
|
||||
"STENCIL_BACK_PASS_DEPTH_PASS": 34819,
|
||||
"STENCIL_BACK_REF": 36003,
|
||||
"STENCIL_BACK_VALUE_MASK": 36004,
|
||||
"STENCIL_BACK_WRITEMASK": 36005,
|
||||
"VIEWPORT": 2978,
|
||||
"SCISSOR_BOX": 3088,
|
||||
"COLOR_CLEAR_VALUE": 3106,
|
||||
"COLOR_WRITEMASK": 3107,
|
||||
"UNPACK_ALIGNMENT": 3317,
|
||||
"PACK_ALIGNMENT": 3333,
|
||||
"MAX_TEXTURE_SIZE": 3379,
|
||||
"MAX_VIEWPORT_DIMS": 3386,
|
||||
"SUBPIXEL_BITS": 3408,
|
||||
"RED_BITS": 3410,
|
||||
"GREEN_BITS": 3411,
|
||||
"BLUE_BITS": 3412,
|
||||
"ALPHA_BITS": 3413,
|
||||
"DEPTH_BITS": 3414,
|
||||
"STENCIL_BITS": 3415,
|
||||
"POLYGON_OFFSET_UNITS": 10752,
|
||||
"POLYGON_OFFSET_FACTOR": 32824,
|
||||
"TEXTURE_BINDING_2D": 32873,
|
||||
"SAMPLE_BUFFERS": 32936,
|
||||
"SAMPLES": 32937,
|
||||
"SAMPLE_COVERAGE_VALUE": 32938,
|
||||
"SAMPLE_COVERAGE_INVERT": 32939,
|
||||
"COMPRESSED_TEXTURE_FORMATS": 34467,
|
||||
"DONT_CARE": 4352,
|
||||
"FASTEST": 4353,
|
||||
"NICEST": 4354,
|
||||
"GENERATE_MIPMAP_HINT": 33170,
|
||||
"BYTE": 5120,
|
||||
"UNSIGNED_BYTE": 5121,
|
||||
"SHORT": 5122,
|
||||
"UNSIGNED_SHORT": 5123,
|
||||
"INT": 5124,
|
||||
"UNSIGNED_INT": 5125,
|
||||
"FLOAT": 5126,
|
||||
"DEPTH_COMPONENT": 6402,
|
||||
"ALPHA": 6406,
|
||||
"RGB": 6407,
|
||||
"RGBA": 6408,
|
||||
"LUMINANCE": 6409,
|
||||
"LUMINANCE_ALPHA": 6410,
|
||||
"UNSIGNED_SHORT_4_4_4_4": 32819,
|
||||
"UNSIGNED_SHORT_5_5_5_1": 32820,
|
||||
"UNSIGNED_SHORT_5_6_5": 33635,
|
||||
"FRAGMENT_SHADER": 35632,
|
||||
"VERTEX_SHADER": 35633,
|
||||
"MAX_VERTEX_ATTRIBS": 34921,
|
||||
"MAX_VERTEX_UNIFORM_VECTORS": 36347,
|
||||
"MAX_VARYING_VECTORS": 36348,
|
||||
"MAX_COMBINED_TEXTURE_IMAGE_UNITS": 35661,
|
||||
"MAX_VERTEX_TEXTURE_IMAGE_UNITS": 35660,
|
||||
"MAX_TEXTURE_IMAGE_UNITS": 34930,
|
||||
"MAX_FRAGMENT_UNIFORM_VECTORS": 36349,
|
||||
"SHADER_TYPE": 35663,
|
||||
"DELETE_STATUS": 35712,
|
||||
"LINK_STATUS": 35714,
|
||||
"VALIDATE_STATUS": 35715,
|
||||
"ATTACHED_SHADERS": 35717,
|
||||
"ACTIVE_UNIFORMS": 35718,
|
||||
"ACTIVE_ATTRIBUTES": 35721,
|
||||
"SHADING_LANGUAGE_VERSION": 35724,
|
||||
"CURRENT_PROGRAM": 35725,
|
||||
"NEVER": 512,
|
||||
"LESS": 513,
|
||||
"EQUAL": 514,
|
||||
"LEQUAL": 515,
|
||||
"GREATER": 516,
|
||||
"NOTEQUAL": 517,
|
||||
"GEQUAL": 518,
|
||||
"ALWAYS": 519,
|
||||
"KEEP": 7680,
|
||||
"REPLACE": 7681,
|
||||
"INCR": 7682,
|
||||
"DECR": 7683,
|
||||
"INVERT": 5386,
|
||||
"INCR_WRAP": 34055,
|
||||
"DECR_WRAP": 34056,
|
||||
"VENDOR": 7936,
|
||||
"RENDERER": 7937,
|
||||
"VERSION": 7938,
|
||||
"NEAREST": 9728,
|
||||
"LINEAR": 9729,
|
||||
"NEAREST_MIPMAP_NEAREST": 9984,
|
||||
"LINEAR_MIPMAP_NEAREST": 9985,
|
||||
"NEAREST_MIPMAP_LINEAR": 9986,
|
||||
"LINEAR_MIPMAP_LINEAR": 9987,
|
||||
"TEXTURE_MAG_FILTER": 10240,
|
||||
"TEXTURE_MIN_FILTER": 10241,
|
||||
"TEXTURE_WRAP_S": 10242,
|
||||
"TEXTURE_WRAP_T": 10243,
|
||||
"TEXTURE": 5890,
|
||||
"TEXTURE_CUBE_MAP": 34067,
|
||||
"TEXTURE_BINDING_CUBE_MAP": 34068,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_X": 34069,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_X": 34070,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Y": 34071,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Y": 34072,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Z": 34073,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Z": 34074,
|
||||
"MAX_CUBE_MAP_TEXTURE_SIZE": 34076,
|
||||
"TEXTURE0": 33984,
|
||||
"TEXTURE1": 33985,
|
||||
"TEXTURE2": 33986,
|
||||
"TEXTURE3": 33987,
|
||||
"TEXTURE4": 33988,
|
||||
"TEXTURE5": 33989,
|
||||
"TEXTURE6": 33990,
|
||||
"TEXTURE7": 33991,
|
||||
"TEXTURE8": 33992,
|
||||
"TEXTURE9": 33993,
|
||||
"TEXTURE10": 33994,
|
||||
"TEXTURE11": 33995,
|
||||
"TEXTURE12": 33996,
|
||||
"TEXTURE13": 33997,
|
||||
"TEXTURE14": 33998,
|
||||
"TEXTURE15": 33999,
|
||||
"TEXTURE16": 34000,
|
||||
"TEXTURE17": 34001,
|
||||
"TEXTURE18": 34002,
|
||||
"TEXTURE19": 34003,
|
||||
"TEXTURE20": 34004,
|
||||
"TEXTURE21": 34005,
|
||||
"TEXTURE22": 34006,
|
||||
"TEXTURE23": 34007,
|
||||
"TEXTURE24": 34008,
|
||||
"TEXTURE25": 34009,
|
||||
"TEXTURE26": 34010,
|
||||
"TEXTURE27": 34011,
|
||||
"TEXTURE28": 34012,
|
||||
"TEXTURE29": 34013,
|
||||
"TEXTURE30": 34014,
|
||||
"TEXTURE31": 34015,
|
||||
"ACTIVE_TEXTURE": 34016,
|
||||
"REPEAT": 10497,
|
||||
"CLAMP_TO_EDGE": 33071,
|
||||
"MIRRORED_REPEAT": 33648,
|
||||
"FLOAT_VEC2": 35664,
|
||||
"FLOAT_VEC3": 35665,
|
||||
"FLOAT_VEC4": 35666,
|
||||
"INT_VEC2": 35667,
|
||||
"INT_VEC3": 35668,
|
||||
"INT_VEC4": 35669,
|
||||
"BOOL": 35670,
|
||||
"BOOL_VEC2": 35671,
|
||||
"BOOL_VEC3": 35672,
|
||||
"BOOL_VEC4": 35673,
|
||||
"FLOAT_MAT2": 35674,
|
||||
"FLOAT_MAT3": 35675,
|
||||
"FLOAT_MAT4": 35676,
|
||||
"SAMPLER_2D": 35678,
|
||||
"SAMPLER_CUBE": 35680,
|
||||
"VERTEX_ATTRIB_ARRAY_ENABLED": 34338,
|
||||
"VERTEX_ATTRIB_ARRAY_SIZE": 34339,
|
||||
"VERTEX_ATTRIB_ARRAY_STRIDE": 34340,
|
||||
"VERTEX_ATTRIB_ARRAY_TYPE": 34341,
|
||||
"VERTEX_ATTRIB_ARRAY_NORMALIZED": 34922,
|
||||
"VERTEX_ATTRIB_ARRAY_POINTER": 34373,
|
||||
"VERTEX_ATTRIB_ARRAY_BUFFER_BINDING": 34975,
|
||||
"IMPLEMENTATION_COLOR_READ_TYPE": 35738,
|
||||
"IMPLEMENTATION_COLOR_READ_FORMAT": 35739,
|
||||
"COMPILE_STATUS": 35713,
|
||||
"LOW_FLOAT": 36336,
|
||||
"MEDIUM_FLOAT": 36337,
|
||||
"HIGH_FLOAT": 36338,
|
||||
"LOW_INT": 36339,
|
||||
"MEDIUM_INT": 36340,
|
||||
"HIGH_INT": 36341,
|
||||
"FRAMEBUFFER": 36160,
|
||||
"RENDERBUFFER": 36161,
|
||||
"RGBA4": 32854,
|
||||
"RGB5_A1": 32855,
|
||||
"RGB565": 36194,
|
||||
"DEPTH_COMPONENT16": 33189,
|
||||
"STENCIL_INDEX8": 36168,
|
||||
"DEPTH_STENCIL": 34041,
|
||||
"RENDERBUFFER_WIDTH": 36162,
|
||||
"RENDERBUFFER_HEIGHT": 36163,
|
||||
"RENDERBUFFER_INTERNAL_FORMAT": 36164,
|
||||
"RENDERBUFFER_RED_SIZE": 36176,
|
||||
"RENDERBUFFER_GREEN_SIZE": 36177,
|
||||
"RENDERBUFFER_BLUE_SIZE": 36178,
|
||||
"RENDERBUFFER_ALPHA_SIZE": 36179,
|
||||
"RENDERBUFFER_DEPTH_SIZE": 36180,
|
||||
"RENDERBUFFER_STENCIL_SIZE": 36181,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE": 36048,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_NAME": 36049,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL": 36050,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE": 36051,
|
||||
"COLOR_ATTACHMENT0": 36064,
|
||||
"DEPTH_ATTACHMENT": 36096,
|
||||
"STENCIL_ATTACHMENT": 36128,
|
||||
"DEPTH_STENCIL_ATTACHMENT": 33306,
|
||||
"NONE": 0,
|
||||
"FRAMEBUFFER_COMPLETE": 36053,
|
||||
"FRAMEBUFFER_INCOMPLETE_ATTACHMENT": 36054,
|
||||
"FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT": 36055,
|
||||
"FRAMEBUFFER_INCOMPLETE_DIMENSIONS": 36057,
|
||||
"FRAMEBUFFER_UNSUPPORTED": 36061,
|
||||
"FRAMEBUFFER_BINDING": 36006,
|
||||
"RENDERBUFFER_BINDING": 36007,
|
||||
"MAX_RENDERBUFFER_SIZE": 34024,
|
||||
"INVALID_FRAMEBUFFER_OPERATION": 1286,
|
||||
"UNPACK_FLIP_Y_WEBGL": 37440,
|
||||
"UNPACK_PREMULTIPLY_ALPHA_WEBGL": 37441,
|
||||
"CONTEXT_LOST_WEBGL": 37442,
|
||||
"UNPACK_COLORSPACE_CONVERSION_WEBGL": 37443,
|
||||
"BROWSER_DEFAULT_WEBGL": 37444
|
||||
};
|
||||
143
components/firstui/fui-circle/gcanvas/context-webgl/GLmethod.js
Normal file
143
components/firstui/fui-circle/gcanvas/context-webgl/GLmethod.js
Normal file
@ -0,0 +1,143 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
let i = 1;
|
||||
|
||||
const GLmethod = {};
|
||||
|
||||
GLmethod.activeTexture = i++; //1
|
||||
GLmethod.attachShader = i++;
|
||||
GLmethod.bindAttribLocation = i++;
|
||||
GLmethod.bindBuffer = i++;
|
||||
GLmethod.bindFramebuffer = i++;
|
||||
GLmethod.bindRenderbuffer = i++;
|
||||
GLmethod.bindTexture = i++;
|
||||
GLmethod.blendColor = i++;
|
||||
GLmethod.blendEquation = i++;
|
||||
GLmethod.blendEquationSeparate = i++; //10
|
||||
GLmethod.blendFunc = i++;
|
||||
GLmethod.blendFuncSeparate = i++;
|
||||
GLmethod.bufferData = i++;
|
||||
GLmethod.bufferSubData = i++;
|
||||
GLmethod.checkFramebufferStatus = i++;
|
||||
GLmethod.clear = i++;
|
||||
GLmethod.clearColor = i++;
|
||||
GLmethod.clearDepth = i++;
|
||||
GLmethod.clearStencil = i++;
|
||||
GLmethod.colorMask = i++; //20
|
||||
GLmethod.compileShader = i++;
|
||||
GLmethod.compressedTexImage2D = i++;
|
||||
GLmethod.compressedTexSubImage2D = i++;
|
||||
GLmethod.copyTexImage2D = i++;
|
||||
GLmethod.copyTexSubImage2D = i++;
|
||||
GLmethod.createBuffer = i++;
|
||||
GLmethod.createFramebuffer = i++;
|
||||
GLmethod.createProgram = i++;
|
||||
GLmethod.createRenderbuffer = i++;
|
||||
GLmethod.createShader = i++; //30
|
||||
GLmethod.createTexture = i++;
|
||||
GLmethod.cullFace = i++;
|
||||
GLmethod.deleteBuffer = i++;
|
||||
GLmethod.deleteFramebuffer = i++;
|
||||
GLmethod.deleteProgram = i++;
|
||||
GLmethod.deleteRenderbuffer = i++;
|
||||
GLmethod.deleteShader = i++;
|
||||
GLmethod.deleteTexture = i++;
|
||||
GLmethod.depthFunc = i++;
|
||||
GLmethod.depthMask = i++; //40
|
||||
GLmethod.depthRange = i++;
|
||||
GLmethod.detachShader = i++;
|
||||
GLmethod.disable = i++;
|
||||
GLmethod.disableVertexAttribArray = i++;
|
||||
GLmethod.drawArrays = i++;
|
||||
GLmethod.drawArraysInstancedANGLE = i++;
|
||||
GLmethod.drawElements = i++;
|
||||
GLmethod.drawElementsInstancedANGLE = i++;
|
||||
GLmethod.enable = i++;
|
||||
GLmethod.enableVertexAttribArray = i++; //50
|
||||
GLmethod.flush = i++;
|
||||
GLmethod.framebufferRenderbuffer = i++;
|
||||
GLmethod.framebufferTexture2D = i++;
|
||||
GLmethod.frontFace = i++;
|
||||
GLmethod.generateMipmap = i++;
|
||||
GLmethod.getActiveAttrib = i++;
|
||||
GLmethod.getActiveUniform = i++;
|
||||
GLmethod.getAttachedShaders = i++;
|
||||
GLmethod.getAttribLocation = i++;
|
||||
GLmethod.getBufferParameter = i++; //60
|
||||
GLmethod.getContextAttributes = i++;
|
||||
GLmethod.getError = i++;
|
||||
GLmethod.getExtension = i++;
|
||||
GLmethod.getFramebufferAttachmentParameter = i++;
|
||||
GLmethod.getParameter = i++;
|
||||
GLmethod.getProgramInfoLog = i++;
|
||||
GLmethod.getProgramParameter = i++;
|
||||
GLmethod.getRenderbufferParameter = i++;
|
||||
GLmethod.getShaderInfoLog = i++;
|
||||
GLmethod.getShaderParameter = i++; //70
|
||||
GLmethod.getShaderPrecisionFormat = i++;
|
||||
GLmethod.getShaderSource = i++;
|
||||
GLmethod.getSupportedExtensions = i++;
|
||||
GLmethod.getTexParameter = i++;
|
||||
GLmethod.getUniform = i++;
|
||||
GLmethod.getUniformLocation = i++;
|
||||
GLmethod.getVertexAttrib = i++;
|
||||
GLmethod.getVertexAttribOffset = i++;
|
||||
GLmethod.isBuffer = i++;
|
||||
GLmethod.isContextLost = i++; //80
|
||||
GLmethod.isEnabled = i++;
|
||||
GLmethod.isFramebuffer = i++;
|
||||
GLmethod.isProgram = i++;
|
||||
GLmethod.isRenderbuffer = i++;
|
||||
GLmethod.isShader = i++;
|
||||
GLmethod.isTexture = i++;
|
||||
GLmethod.lineWidth = i++;
|
||||
GLmethod.linkProgram = i++;
|
||||
GLmethod.pixelStorei = i++;
|
||||
GLmethod.polygonOffset = i++; //90
|
||||
GLmethod.readPixels = i++;
|
||||
GLmethod.renderbufferStorage = i++;
|
||||
GLmethod.sampleCoverage = i++;
|
||||
GLmethod.scissor = i++;
|
||||
GLmethod.shaderSource = i++;
|
||||
GLmethod.stencilFunc = i++;
|
||||
GLmethod.stencilFuncSeparate = i++;
|
||||
GLmethod.stencilMask = i++;
|
||||
GLmethod.stencilMaskSeparate = i++;
|
||||
GLmethod.stencilOp = i++; //100
|
||||
GLmethod.stencilOpSeparate = i++;
|
||||
GLmethod.texImage2D = i++;
|
||||
GLmethod.texParameterf = i++;
|
||||
GLmethod.texParameteri = i++;
|
||||
GLmethod.texSubImage2D = i++;
|
||||
GLmethod.uniform1f = i++;
|
||||
GLmethod.uniform1fv = i++;
|
||||
GLmethod.uniform1i = i++;
|
||||
GLmethod.uniform1iv = i++;
|
||||
GLmethod.uniform2f = i++; //110
|
||||
GLmethod.uniform2fv = i++;
|
||||
GLmethod.uniform2i = i++;
|
||||
GLmethod.uniform2iv = i++;
|
||||
GLmethod.uniform3f = i++;
|
||||
GLmethod.uniform3fv = i++;
|
||||
GLmethod.uniform3i = i++;
|
||||
GLmethod.uniform3iv = i++;
|
||||
GLmethod.uniform4f = i++;
|
||||
GLmethod.uniform4fv = i++;
|
||||
GLmethod.uniform4i = i++; //120
|
||||
GLmethod.uniform4iv = i++;
|
||||
GLmethod.uniformMatrix2fv = i++;
|
||||
GLmethod.uniformMatrix3fv = i++;
|
||||
GLmethod.uniformMatrix4fv = i++;
|
||||
GLmethod.useProgram = i++;
|
||||
GLmethod.validateProgram = i++;
|
||||
GLmethod.vertexAttrib1f = i++; //new
|
||||
GLmethod.vertexAttrib2f = i++; //new
|
||||
GLmethod.vertexAttrib3f = i++; //new
|
||||
GLmethod.vertexAttrib4f = i++; //new //130
|
||||
GLmethod.vertexAttrib1fv = i++; //new
|
||||
GLmethod.vertexAttrib2fv = i++; //new
|
||||
GLmethod.vertexAttrib3fv = i++; //new
|
||||
GLmethod.vertexAttrib4fv = i++; //new
|
||||
GLmethod.vertexAttribPointer = i++;
|
||||
GLmethod.viewport = i++;
|
||||
|
||||
export default GLmethod;
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 407 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const GLtype = {};
|
||||
|
||||
[
|
||||
"GLbitfield",
|
||||
"GLboolean",
|
||||
"GLbyte",
|
||||
"GLclampf",
|
||||
"GLenum",
|
||||
"GLfloat",
|
||||
"GLint",
|
||||
"GLintptr",
|
||||
"GLsizei",
|
||||
"GLsizeiptr",
|
||||
"GLshort",
|
||||
"GLubyte",
|
||||
"GLuint",
|
||||
"GLushort"
|
||||
].sort().map((typeName, i) => GLtype[typeName] = 1 >> (i + 1));
|
||||
|
||||
export default GLtype;
|
||||
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 0 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLProgram';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLProgram {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61 40 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLRenderBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLRenderbuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 40 7 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLShader';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLShader {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default class WebGLShaderPrecisionFormat {
|
||||
className = 'WebGLShaderPrecisionFormat';
|
||||
|
||||
constructor({
|
||||
rangeMin, rangeMax, precision
|
||||
}) {
|
||||
this.rangeMin = rangeMin;
|
||||
this.rangeMax = rangeMax;
|
||||
this.precision = precision;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLTexture';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLTexture {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 40 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLUniformLocation';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLUniformLocation {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 0 7 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export function getTransferedObjectUUID(name, id) {
|
||||
return `${name.toLowerCase()}-${id}`;
|
||||
}
|
||||
75
components/firstui/fui-circle/gcanvas/env/canvas.js
vendored
Normal file
75
components/firstui/fui-circle/gcanvas/env/canvas.js
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1861 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import GContext2D from '../context-2d/RenderingContext';
|
||||
import GContextWebGL from '../context-webgl/RenderingContext';
|
||||
|
||||
export default class GCanvas {
|
||||
|
||||
// static GBridge = null;
|
||||
|
||||
id = null;
|
||||
|
||||
_needRender = true;
|
||||
|
||||
constructor(id, { disableAutoSwap }) {
|
||||
this.id = id;
|
||||
|
||||
this._disableAutoSwap = disableAutoSwap;
|
||||
if (disableAutoSwap) {
|
||||
this._swapBuffers = () => {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getContext(type) {
|
||||
|
||||
let context = null;
|
||||
|
||||
if (type.match(/webgl/i)) {
|
||||
context = new GContextWebGL(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
if (!this._disableAutoSwap) {
|
||||
const render = () => {
|
||||
if (this._needRender) {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
this._needRender = false;
|
||||
}
|
||||
}
|
||||
setInterval(render, 16);
|
||||
}
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
|
||||
} else if (type.match(/2d/i)) {
|
||||
context = new GContext2D(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
// const render = ( callback ) => {
|
||||
//
|
||||
// const commands = context._drawCommands;
|
||||
// context._drawCommands = '';
|
||||
//
|
||||
// GCanvas.GBridge.render2d(this.id, commands, callback);
|
||||
// this._needRender = false;
|
||||
// }
|
||||
// //draw方法触发
|
||||
// context._flush = render;
|
||||
// //setInterval(render, 16);
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 0);
|
||||
} else {
|
||||
throw new Error('not supported context ' + type);
|
||||
}
|
||||
|
||||
return context;
|
||||
|
||||
}
|
||||
|
||||
reset() {
|
||||
GCanvas.GBridge.callReset(this.id);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
97
components/firstui/fui-circle/gcanvas/env/image.js
vendored
Normal file
97
components/firstui/fui-circle/gcanvas/env/image.js
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
let incId = 1;
|
||||
|
||||
const noop = function () { };
|
||||
|
||||
class GImage {
|
||||
|
||||
static GBridge = null;
|
||||
|
||||
constructor() {
|
||||
this._id = incId++;
|
||||
this._width = 0;
|
||||
this._height = 0;
|
||||
this._src = undefined;
|
||||
this._onload = noop;
|
||||
this._onerror = noop;
|
||||
this.complete = false;
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this._width;
|
||||
}
|
||||
set width(v) {
|
||||
this._width = v;
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
set height(v) {
|
||||
this._height = v;
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this._src;
|
||||
}
|
||||
|
||||
set src(v) {
|
||||
|
||||
if (v.startsWith('//')) {
|
||||
v = 'http:' + v;
|
||||
}
|
||||
|
||||
this._src = v;
|
||||
|
||||
GImage.GBridge.perloadImage([this._src, this._id], (data) => {
|
||||
if (typeof data === 'string') {
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
if (data.error) {
|
||||
var evt = { type: 'error', target: this };
|
||||
this.onerror(evt);
|
||||
} else {
|
||||
this.complete = true;
|
||||
this.width = typeof data.width === 'number' ? data.width : 0;
|
||||
this.height = typeof data.height === 'number' ? data.height : 0;
|
||||
var evt = { type: 'load', target: this };
|
||||
this.onload(evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = listener;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = listener;
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = noop;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = noop;
|
||||
}
|
||||
}
|
||||
|
||||
get onload() {
|
||||
return this._onload;
|
||||
}
|
||||
|
||||
set onload(v) {
|
||||
this._onload = v;
|
||||
}
|
||||
|
||||
get onerror() {
|
||||
return this._onerror;
|
||||
}
|
||||
|
||||
set onerror(v) {
|
||||
this._onerror = v;
|
||||
}
|
||||
}
|
||||
|
||||
export default GImage;
|
||||
25
components/firstui/fui-circle/gcanvas/env/tool.js
vendored
Normal file
25
components/firstui/fui-circle/gcanvas/env/tool.js
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 0 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
|
||||
export function ArrayBufferToBase64 (buffer) {
|
||||
var binary = '';
|
||||
var bytes = new Uint8ClampedArray(buffer);
|
||||
for (var len = bytes.byteLength, i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
export function Base64ToUint8ClampedArray(base64String) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/\-/g, '+')
|
||||
.replace(/_/g, '/');
|
||||
|
||||
const rawData = atob(base64);
|
||||
const outputArray = new Uint8ClampedArray(rawData.length);
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
}
|
||||
48
components/firstui/fui-circle/gcanvas/index.js
Normal file
48
components/firstui/fui-circle/gcanvas/index.js
Normal file
@ -0,0 +1,48 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61407 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
import GCanvas from './env/canvas';
|
||||
import GImage from './env/image';
|
||||
|
||||
import GWebGLRenderingContext from './context-webgl/RenderingContext';
|
||||
import GContext2D from './context-2d/RenderingContext';
|
||||
|
||||
import GBridgeWeex from './bridge/bridge-weex';
|
||||
|
||||
export let Image = GImage;
|
||||
|
||||
export let WeexBridge = GBridgeWeex;
|
||||
|
||||
export function enable(el, {
|
||||
bridge,
|
||||
debug,
|
||||
disableAutoSwap,
|
||||
disableComboCommands
|
||||
} = {}) {
|
||||
|
||||
const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
|
||||
|
||||
GBridge.callEnable(el.ref, [
|
||||
0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
|
||||
-1, // hybridLayerType: 0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
|
||||
false, // supportScroll
|
||||
false, // newCanvasMode
|
||||
1, // compatible
|
||||
'white', // clearColor
|
||||
false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
|
||||
]);
|
||||
|
||||
if (debug === true) {
|
||||
GBridge.callEnableDebug();
|
||||
}
|
||||
if (disableComboCommands) {
|
||||
GBridge.callEnableDisableCombo();
|
||||
}
|
||||
|
||||
var canvas = new GCanvas(el.ref, {
|
||||
disableAutoSwap
|
||||
});
|
||||
let pixelRatio = uni.getSystemInfoSync().pixelRatio;
|
||||
canvas.width = el.style.width * pixelRatio;
|
||||
canvas.height = el.style.height * pixelRatio;
|
||||
|
||||
return canvas;
|
||||
};
|
||||
142
components/firstui/fui-circle/mpjs.js
Normal file
142
components/firstui/fui-circle/mpjs.js
Normal file
@ -0,0 +1,142 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1407 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
// #ifdef MP
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
context: null,
|
||||
start: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
percent(val) {
|
||||
setTimeout(() => {
|
||||
this.init();
|
||||
}, 50)
|
||||
},
|
||||
w(val) {
|
||||
setTimeout(() => {
|
||||
this.init();
|
||||
}, 50)
|
||||
},
|
||||
strokeWidth(val) {
|
||||
setTimeout(() => {
|
||||
this.init();
|
||||
}, 50)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.init();
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//初始化绘制
|
||||
init(init) {
|
||||
let start = this.activeMode === 'backwards' ? 0 : this.start;
|
||||
start = start > this.percent ? 0 : start;
|
||||
this.drawCircle(start);
|
||||
},
|
||||
//默认背景
|
||||
drawDefaultCircle(ctx) {
|
||||
let sw = Number(this.strokeWidth);
|
||||
// #ifdef MP-ALIPAY
|
||||
sw = sw * 4
|
||||
// #endif
|
||||
ctx.setLineWidth(sw);
|
||||
ctx.setStrokeStyle(this.background);
|
||||
let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
|
||||
this.drawArc(ctx, eAngle, true);
|
||||
},
|
||||
drawCircle(start) {
|
||||
let ctx = this.context;
|
||||
if (!ctx) {
|
||||
ctx = uni.createCanvasContext(this.circleId, this);
|
||||
this.context = ctx;
|
||||
}
|
||||
//绘制默认背景
|
||||
this.defaultShow && this.drawDefaultCircle(ctx)
|
||||
let sw = Number(this.strokeWidth)
|
||||
// #ifdef MP-ALIPAY
|
||||
sw = sw * 4
|
||||
// #endif
|
||||
ctx.setLineWidth(sw);
|
||||
let gradient = this.foreground || this.primaryColor;
|
||||
// #ifndef MP-KUAISHOU
|
||||
if (this.gradient) {
|
||||
gradient = ctx.createLinearGradient(0, 0, Number(this.w), 0);
|
||||
gradient.addColorStop(0, this.gradient);
|
||||
gradient.addColorStop(1, this.foreground || this.primaryColor);
|
||||
}
|
||||
// #endif
|
||||
ctx.setStrokeStyle(gradient);
|
||||
let percentage = Number(this.percent)
|
||||
if (percentage > 0) {
|
||||
start += Number(this.speed);
|
||||
start = start > percentage ? percentage : start;
|
||||
}
|
||||
if (this.show) {
|
||||
let si = Number(this.size)
|
||||
// #ifdef MP-ALIPAY
|
||||
si = si * 4
|
||||
// #endif
|
||||
ctx.setFontSize(si);
|
||||
ctx.setFillStyle(this.color || this.primaryColor);
|
||||
ctx.setTextAlign('center');
|
||||
ctx.setTextBaseline('middle');
|
||||
let percent = `${this.counterclockwise ? 100 - start : start}%`;
|
||||
let radius = this.w / 2
|
||||
// #ifdef MP-ALIPAY
|
||||
radius = radius * 4
|
||||
// #endif
|
||||
ctx.fillText(percent, radius, radius);
|
||||
}
|
||||
if (percentage == 0 || (this.counterclockwise && start == 100)) {
|
||||
ctx.draw();
|
||||
} else {
|
||||
let eAngle = ((2 * Math.PI) / 100) * start + Number(this.sAngle) * Math.PI;
|
||||
this.drawArc(ctx, eAngle);
|
||||
}
|
||||
let time = 1000 / 60
|
||||
// #ifdef MP-ALIPAY
|
||||
time = time / 2
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
this.start = start;
|
||||
if (start == percentage) {
|
||||
this.$emit('end', {
|
||||
canvasId: this.circleId,
|
||||
percent: start
|
||||
});
|
||||
} else {
|
||||
this.drawCircle(start);
|
||||
}
|
||||
this.$emit('change', {
|
||||
percent: start
|
||||
});
|
||||
}, time);
|
||||
},
|
||||
//创建弧线
|
||||
drawArc(ctx, eAngle, def) {
|
||||
ctx.setLineCap(this.lineCap);
|
||||
ctx.beginPath();
|
||||
let radius = this.w / 2;
|
||||
let sw = Number(this.strokeWidth);
|
||||
// #ifdef MP-ALIPAY
|
||||
radius = radius * 4
|
||||
sw = sw * 4
|
||||
// #endif
|
||||
ctx.arc(radius, radius, radius - sw, Number(this.sAngle) * Math.PI, eAngle, this.counterclockwise);
|
||||
ctx.stroke();
|
||||
!def && ctx.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
export default {}
|
||||
// #endif
|
||||
142
components/firstui/fui-circle/nvue.js
Normal file
142
components/firstui/fui-circle/nvue.js
Normal file
@ -0,0 +1,142 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 614 0 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
// #ifdef APP-NVUE
|
||||
import {
|
||||
enable,
|
||||
WeexBridge
|
||||
} from './gcanvas/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
start: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
percent(val) {
|
||||
setTimeout(() => {
|
||||
this.init();
|
||||
}, 50)
|
||||
},
|
||||
w(val) {
|
||||
setTimeout(() => {
|
||||
this.init();
|
||||
}, 50)
|
||||
},
|
||||
strokeWidth(val) {
|
||||
setTimeout(() => {
|
||||
this.init();
|
||||
}, 50)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let sys = uni.getSystemInfoSync()
|
||||
this.isAndroid = sys.platform.toLocaleLowerCase() == "android"
|
||||
this.fontSize = this.isAndroid ? Number(this.size) : Number(this.size) * sys.pixelRatio
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.init(true);
|
||||
}, 50);
|
||||
},
|
||||
// #ifndef VUE3
|
||||
beforeDestroy() {
|
||||
this.context = null;
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
beforeUnmount() {
|
||||
this.context = null;
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
//初始化绘制
|
||||
init(init) {
|
||||
let start = this.activeMode === 'backwards' ? 0 : this.start;
|
||||
this.drawCircle(start);
|
||||
},
|
||||
//默认背景
|
||||
drawDefaultCircle(ctx) {
|
||||
ctx.setLineWidth(Number(this.strokeWidth));
|
||||
ctx.setStrokeStyle(this.background);
|
||||
let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
|
||||
this.drawArc(ctx, eAngle, true);
|
||||
},
|
||||
//进度圆环
|
||||
drawCircle(start) {
|
||||
let ctx = this.context;
|
||||
if (!ctx) {
|
||||
let ganvas = this.$refs[this.circleId];
|
||||
let canvas = enable(ganvas, {
|
||||
bridge: WeexBridge
|
||||
});
|
||||
ctx = canvas.getContext('2d');
|
||||
//android赋值后，canvas大小可能不受控制
|
||||
this.context = ctx;
|
||||
}
|
||||
//绘制默认背景
|
||||
if (!this.isAndroid) {
|
||||
ctx.setFillStyle(this.fillStyle)
|
||||
ctx.fillRect(0, 0, this.w, this.w)
|
||||
}
|
||||
// ctx.clearRect(0, 0, this.w, this.w)
|
||||
this.defaultShow && this.drawDefaultCircle(ctx)
|
||||
ctx.setLineWidth(Number(this.strokeWidth));
|
||||
ctx.beginPath()
|
||||
let gradient = this.foreground || this.primaryColor;
|
||||
// if (this.gradient) {
|
||||
// gradient = ctx.createLinearGradient(0, 0, this.w, 0);
|
||||
// gradient.addColorStop(0, this.gradient);
|
||||
// gradient.addColorStop(1, this.foreground);
|
||||
// }
|
||||
ctx.setStrokeStyle(gradient);
|
||||
let percentage = Number(this.percent)
|
||||
if (percentage > 0) {
|
||||
start += Number(this.speed);
|
||||
start = start > percentage ? percentage : start;
|
||||
}
|
||||
if (this.show) {
|
||||
ctx.setFontSize(this.fontSize);
|
||||
ctx.setFillStyle(this.color || this.primaryColor);
|
||||
ctx.setTextAlign('center');
|
||||
ctx.setTextBaseline('middle');
|
||||
let percent = `${this.counterclockwise ? 100 - start : start}%`;
|
||||
let radius = this.w / 2;
|
||||
ctx.fillText(percent, radius, radius);
|
||||
}
|
||||
if (percentage == 0 || (this.counterclockwise && start == 100)) {
|
||||
ctx.draw();
|
||||
} else {
|
||||
let eAngle = ((2 * Math.PI) / 100) * start + Number(this.sAngle) * Math.PI;
|
||||
this.drawArc(ctx, eAngle);
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.start = start;
|
||||
if (start == percentage) {
|
||||
this.$emit('end', {
|
||||
canvasId: this.circleId,
|
||||
percent: start
|
||||
});
|
||||
} else {
|
||||
this.drawCircle(start);
|
||||
}
|
||||
this.$emit('change', {
|
||||
percent: start
|
||||
});
|
||||
}, 1000 / 60);
|
||||
},
|
||||
drawArc(ctx, eAngle, def) {
|
||||
ctx.setLineCap(this.lineCap);
|
||||
ctx.beginPath();
|
||||
let radius = this.w / 2;
|
||||
ctx.arc(radius, radius, radius - Number(this.strokeWidth), Number(this.sAngle) * Math.PI, eAngle, this
|
||||
.counterclockwise);
|
||||
ctx.stroke();
|
||||
!def && ctx.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
export default {}
|
||||
// #endif
|
||||
31
components/firstui/fui-circle/render.js
Normal file
31
components/firstui/fui-circle/render.js
Normal file
@ -0,0 +1,31 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 140 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
// #ifdef APP-VUE || H5
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: -1
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
percent(val) {
|
||||
this.percentage = Number(val) || 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.percentage = Number(this.percent) || 0
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.$emit('change', e);
|
||||
},
|
||||
end(e) {
|
||||
this.$emit('end', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-VUE || H5
|
||||
export default {}
|
||||
// #endif
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user