好友资料，申请好友流程，调整
This commit is contained in:
@@ -29,7 +29,15 @@ const getUserInfo = (targetId) => {
|
|||||||
url: 'im/userInfo/' + targetId,
|
url: 'im/userInfo/' + targetId,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查看好友资料，附带好友关系
|
||||||
|
*/
|
||||||
|
const getFriendInfo = (userId) => {
|
||||||
|
return request({
|
||||||
|
url: 'im/friendInfo/' + userId
|
||||||
|
})
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* 获取好友申请列表
|
* 获取好友申请列表
|
||||||
*/
|
*/
|
||||||
@@ -56,8 +64,8 @@ const rejectFriend = (targetId) => {
|
|||||||
const searchFriend = (value) => {
|
const searchFriend = (value) => {
|
||||||
return request({
|
return request({
|
||||||
url: 'im/search',
|
url: 'im/search',
|
||||||
data:{
|
data: {
|
||||||
keyword:value
|
keyword: value
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -67,15 +75,16 @@ const pedingFriend = (recipient) => {
|
|||||||
method: 'POST',
|
method: 'POST',
|
||||||
url: 'im/friends/' + recipient
|
url: 'im/friends/' + recipient
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
getImToken,
|
getImToken,
|
||||||
getFriends,
|
getFriends,
|
||||||
getUserInfo,
|
getUserInfo,
|
||||||
|
getFriendInfo,
|
||||||
getPedings,
|
getPedings,
|
||||||
resolveFriend,
|
resolveFriend,
|
||||||
rejectFriend,
|
rejectFriend,
|
||||||
searchFriend,
|
searchFriend,
|
||||||
pedingFriend
|
pedingFriend
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<view class="agress-btn">
|
<view class="agress-btn">
|
||||||
<span v-if="isAgree" @click="action('agree', item)">通过</span>
|
<span v-if="isAgree" @click="action('agree', item)">通过</span>
|
||||||
<span v-if="isAgree" @click="action('reject', item)">拒绝</span>
|
<span v-if="isAgree" @click="action('reject', item)">拒绝</span>
|
||||||
<span v-if="isApply && !item.is_friend" @click="action('apply', item)">申请</span>
|
<span v-if="isApply && !item.is_friend" @click="action('apply', item)">查看</span>
|
||||||
<span class="isFri" v-if="isApply && item.is_friend" @click="action('isFriend', item)">已是好友</span>
|
<span class="isFri" v-if="isApply && item.is_friend" @click="action('isFriend', item)">已是好友</span>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
</u-index-anchor>
|
</u-index-anchor>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex"
|
<view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex"
|
||||||
@click="$Router.push({ name: 'imFriendsInfo', params: { id: friendItem.userId } })">
|
@click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })">
|
||||||
<block v-if="friendItem.portraitUrl != ''">
|
<block v-if="friendItem.portraitUrl != ''">
|
||||||
<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
|
<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
|
||||||
:default-url="require('@/static/user/cover.png')"></u-avatar>
|
:default-url="require('@/static/user/cover.png')"></u-avatar>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 用户信息 -->
|
<!-- 用户信息 -->
|
||||||
<view class="user-info">
|
<view class="user-info u-border-bottom">
|
||||||
<u-avatar :src="userInfo.portraitUrl" size="100" />
|
<u-avatar :src="userInfo.portraitUrl" size="100" />
|
||||||
|
|
||||||
<view class="nickname">{{ userInfo.username }}</view>
|
<view class="nickname">{{ userInfo.username }}</view>
|
||||||
@@ -13,43 +13,53 @@
|
|||||||
<u-tag text="女" v-if="userInfo.gender === 2" color="#fff" borderColor="#e4867a" size="mini" icon="woman"
|
<u-tag text="女" v-if="userInfo.gender === 2" color="#fff" borderColor="#e4867a" size="mini" icon="woman"
|
||||||
bgColor="#e4867a"></u-tag>
|
bgColor="#e4867a"></u-tag>
|
||||||
</view>
|
</view>
|
||||||
<view class="address">{{ userInfo.address }}</view>
|
<view class="address" @longpress="copyAddress">{{ userInfo.address }}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="actions">
|
<block v-if="userInfo.is_friend">
|
||||||
<u-cell-group>
|
<view class="actions">
|
||||||
<u-cell isLink title="设置备注" @click="setRemark"></u-cell>
|
<u-cell-group>
|
||||||
<u-cell isLink title="设置标签" @click="setRemark"></u-cell>
|
<u-cell isLink title="设置备注" @click="setRemark"></u-cell>
|
||||||
<u-cell title="聊天免打扰">
|
<u-cell isLink title="设置标签" @click="setRemark"></u-cell>
|
||||||
<u-switch slot="value" size="18" v-model="status" activeColor="#34CE98" @change="setStatus">
|
<u-cell title="聊天免打扰">
|
||||||
</u-switch>
|
<u-switch slot="value" size="18" v-model="status" activeColor="#34CE98" @change="setStatus">
|
||||||
</u-cell>
|
</u-switch>
|
||||||
<u-cell title="聊天置顶">
|
</u-cell>
|
||||||
<u-switch slot="value" size="18" v-model="isTop" activeColor="#34CE98" @change="setTop">
|
<u-cell title="聊天置顶">
|
||||||
</u-switch>
|
<u-switch slot="value" size="18" v-model="isTop" activeColor="#34CE98" @change="setTop">
|
||||||
</u-cell>
|
</u-switch>
|
||||||
<!-- <u-cell title="加入黑名单">
|
</u-cell>
|
||||||
|
<!-- <u-cell title="加入黑名单">
|
||||||
<u-switch slot="value" size="18" v-model="block" activeColor="#34CE98" @change="setBlock"></u-switch>
|
<u-switch slot="value" size="18" v-model="block" activeColor="#34CE98" @change="setBlock"></u-switch>
|
||||||
</u-cell> -->
|
</u-cell> -->
|
||||||
<u-cell isLink titleStyle="color: red" title="删除好友" @click="deleteFriend"></u-cell>
|
<u-cell isLink titleStyle="color: red" title="删除好友" @click="deleteFriend"></u-cell>
|
||||||
</u-cell-group>
|
</u-cell-group>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="footer">
|
<view class="footer">
|
||||||
<u-button @click="toPrivate()">
|
<u-button @click="toPrivate">
|
||||||
<u-icon name="chat" size="20" /> 发送消息
|
<u-icon name="chat" size="20" /> 发送消息
|
||||||
</u-button>
|
</u-button>
|
||||||
<u-button @click="toPrivate()">
|
<u-button @click="toPrivate">
|
||||||
<u-icon name="mic" size="20" /> 音视频通话
|
<u-icon name="mic" size="20" /> 音视频通话
|
||||||
</u-button>
|
</u-button>
|
||||||
</view>
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="footer">
|
||||||
|
<u-button @click="toBeFriend" color="#34CE98">
|
||||||
|
<uni-icons color="#FFFFFF" type="staff" size="20"></uni-icons> 申请成为好友
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
getUserInfo
|
getFriendInfo,
|
||||||
} from '@/apis/interfaces/im.js'
|
pedingFriend
|
||||||
|
} from '@/apis/interfaces/im.js'
|
||||||
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
|
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -65,8 +75,8 @@
|
|||||||
},
|
},
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
this.targetId = e.targetId
|
this.targetId = e.targetId
|
||||||
getUserInfo(e.targetId).then(res => {
|
console.log(this.targetId);
|
||||||
console.log(res);
|
getFriendInfo(e.targetId).then(res => {
|
||||||
this.userInfo = res
|
this.userInfo = res
|
||||||
uni.setNavigationBarTitle({
|
uni.setNavigationBarTitle({
|
||||||
title: res.name
|
title: res.name
|
||||||
@@ -78,12 +88,26 @@
|
|||||||
this.status = !Boolean(status)
|
this.status = !Boolean(status)
|
||||||
})
|
})
|
||||||
RongIMLib.getConversation(this.conversationType, this.targetId, ({
|
RongIMLib.getConversation(this.conversationType, this.targetId, ({
|
||||||
|
code,
|
||||||
conversation
|
conversation
|
||||||
}) => {
|
}) => {
|
||||||
this.isTop = conversation.isTop
|
if (code == 0) {
|
||||||
|
this.isTop = conversation.isTop
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
copyAddress() {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: this.userInfo.address,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '复制区块链成功'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
toPrivate() {
|
toPrivate() {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
|
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
|
||||||
@@ -95,18 +119,18 @@
|
|||||||
title: '开发中'
|
title: '开发中'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
deleteFriend() {
|
deleteFriend() {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '删除确认',
|
title: '删除确认',
|
||||||
content: '确认删除后不可恢复',
|
content: '确认删除后不可恢复',
|
||||||
success: (e) => {
|
success: (e) => {
|
||||||
if (e.confirm) {
|
if (e.confirm) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
title: '开发中'
|
title: '开发中'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
setStatus() {
|
setStatus() {
|
||||||
@@ -127,6 +151,23 @@
|
|||||||
},
|
},
|
||||||
setBlock() {
|
setBlock() {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 申请好友
|
||||||
|
toBeFriend() {
|
||||||
|
pedingFriend(this.targetId)
|
||||||
|
.then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '申请成功',
|
||||||
|
icon: "none"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'error',
|
||||||
|
title: err.message,
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,29 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
我的资料，也就展示个二维码吧
|
{{ userInfo.name }}
|
||||||
获取一波资料吧
|
<uqrcode ref="uQRCode" :text="qrContent" />
|
||||||
</div>
|
|
||||||
</template>
|
<button type="default" @click="saveToPhoto">保存到相册</button>
|
||||||
|
</div>
|
||||||
<script>
|
</template>
|
||||||
import { getUserInfo } from '@/apis/interfaces/im'
|
|
||||||
export default{
|
<script>
|
||||||
data(){
|
import {
|
||||||
return{
|
getUserInfo
|
||||||
|
} from '@/apis/interfaces/im'
|
||||||
}
|
|
||||||
},
|
export default {
|
||||||
mounted() {
|
data() {
|
||||||
console.log(this.$Route)
|
return {
|
||||||
// getUserInfo(this.$Route.query.id).then(res => {
|
qrContent: 'ADDFRIEND|'
|
||||||
|
}
|
||||||
// })
|
},
|
||||||
},
|
onLoad() {
|
||||||
methods: {
|
this.qrContent += this.userInfo.userId
|
||||||
|
},
|
||||||
}
|
computed: {
|
||||||
}
|
userInfo() {
|
||||||
</script>
|
return this.$store.getters.sender
|
||||||
|
}
|
||||||
<style lang="scss" scoped>
|
},
|
||||||
|
methods: {
|
||||||
|
saveToPhoto() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/im/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -56,30 +56,10 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 操作申请
|
action(e) {
|
||||||
action(e) {
|
uni.navigateTo({
|
||||||
uni.showLoading();
|
url: '/pages/im/friends/info?targetId=' + e.item.userId
|
||||||
pedingFriend(e.item.userId)
|
})
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '申请成功',
|
|
||||||
icon: "none",
|
|
||||||
success: () => {
|
|
||||||
this.searchResult.splice(this.searchResult.findIndex((it, index) => it
|
|
||||||
.userId === e.item.userId), 1);
|
|
||||||
if (this.searchResult.length === 0) {
|
|
||||||
this.searchValue = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.showToast({
|
|
||||||
icon: 'error',
|
|
||||||
title: err.message,
|
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -12,6 +12,9 @@
|
|||||||
<view class="item" @click="onNav('imFriends', {})">
|
<view class="item" @click="onNav('imFriends', {})">
|
||||||
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
|
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="item" @click="scanQrCode">
|
||||||
|
<uni-icons color="#555" type="scan" size="22"></uni-icons>
|
||||||
|
</view>
|
||||||
<view class="item" @click="onNav('', {})">
|
<view class="item" @click="onNav('', {})">
|
||||||
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
|
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
@@ -67,7 +70,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
|
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
|
||||||
import im from '@/utils/im/index.js'
|
import im from '@/utils/im/index.js'
|
||||||
import userAuth from '@/public/userAuth'
|
import userAuth from '@/public/userAuth'
|
||||||
@@ -153,7 +156,7 @@
|
|||||||
.pickedItem.isTop)
|
.pickedItem.isTop)
|
||||||
} else {
|
} else {
|
||||||
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
|
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
|
||||||
}
|
}
|
||||||
im.setNotifyBadge()
|
im.setNotifyBadge()
|
||||||
this.getConversationList()
|
this.getConversationList()
|
||||||
this.hidePop()
|
this.hidePop()
|
||||||
@@ -193,8 +196,7 @@
|
|||||||
getConversationList() {
|
getConversationList() {
|
||||||
const count = 1000
|
const count = 1000
|
||||||
const timestamp = 0
|
const timestamp = 0
|
||||||
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
|
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
|
||||||
console.log('getConversationList', res);
|
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
this.conversations = res.conversations
|
this.conversations = res.conversations
|
||||||
}
|
}
|
||||||
@@ -223,6 +225,20 @@
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
scanQrCode() {
|
||||||
|
uni.scanCode({
|
||||||
|
success: (res) => {
|
||||||
|
// "result": "ADDFRIEND|10010",
|
||||||
|
if (res.scanType == 'QR_CODE') {
|
||||||
|
res.result.substr(0, 10) == 'ADDFRIEND|'
|
||||||
|
// 跳转到添加好友页面
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
18
uni_modules/Sansnn-uQRCode/changelog.md
Normal file
18
uni_modules/Sansnn-uQRCode/changelog.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
## 3.0.1（2022-01-05）
|
||||||
|
3.0.1 gcanvas引用目录调整。
|
||||||
|
## 3.0.0（2022-01-04）
|
||||||
|
3.0.0 uQRCode 3.0 全新版本来袭。
|
||||||
|
## 2.0.4（2021-11-19）
|
||||||
|
2.0.4 新增绘制模式；新增绘制延时、canvas导入文件延时属性。
|
||||||
|
## 2.0.3（2021-10-18）
|
||||||
|
2.0.3 修复在部分安卓设备生成异常；移除延迟绘制；新增批量生成示例。
|
||||||
|
## 2.0.23（2021-08-09）
|
||||||
|
|
||||||
|
## 2.0.22（2021-08-09）
|
||||||
|
|
||||||
|
## 2.0.21（2021-07-28）
|
||||||
|
|
||||||
|
## 2.0.2（2021-07-28）
|
||||||
|
2.0.2 新增延迟绘制。
|
||||||
|
## 2.0.1（2021-07-26）
|
||||||
|
2.0.1 调整为uni_modules目录规范。
|
||||||
1323
uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js
Normal file
1323
uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,241 @@
|
|||||||
|
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,18 @@
|
|||||||
|
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,8 @@
|
|||||||
|
class FillStylePattern {
|
||||||
|
constructor(img, pattern) {
|
||||||
|
this._style = pattern;
|
||||||
|
this._img = img;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FillStylePattern;
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
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,666 @@
|
|||||||
|
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,11 @@
|
|||||||
|
export default class WebGLActiveInfo {
|
||||||
|
className = 'WebGLActiveInfo';
|
||||||
|
|
||||||
|
constructor({
|
||||||
|
type, name, size
|
||||||
|
}) {
|
||||||
|
this.type = type;
|
||||||
|
this.name = name;
|
||||||
|
this.size = size;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
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,21 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,298 @@
|
|||||||
|
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,142 @@
|
|||||||
|
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 @@
|
|||||||
|
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,21 @@
|
|||||||
|
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,21 @@
|
|||||||
|
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,22 @@
|
|||||||
|
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,11 @@
|
|||||||
|
export default class WebGLShaderPrecisionFormat {
|
||||||
|
className = 'WebGLShaderPrecisionFormat';
|
||||||
|
|
||||||
|
constructor({
|
||||||
|
rangeMin, rangeMax, precision
|
||||||
|
}) {
|
||||||
|
this.rangeMin = rangeMin;
|
||||||
|
this.rangeMax = rangeMax;
|
||||||
|
this.precision = precision;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
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,22 @@
|
|||||||
|
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,3 @@
|
|||||||
|
export function getTransferedObjectUUID(name, id) {
|
||||||
|
return `${name.toLowerCase()}-${id}`;
|
||||||
|
}
|
||||||
74
uni_modules/Sansnn-uQRCode/components/uqrcode/gcanvas/env/canvas.js
vendored
Normal file
74
uni_modules/Sansnn-uQRCode/components/uqrcode/gcanvas/env/canvas.js
vendored
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
96
uni_modules/Sansnn-uQRCode/components/uqrcode/gcanvas/env/image.js
vendored
Normal file
96
uni_modules/Sansnn-uQRCode/components/uqrcode/gcanvas/env/image.js
vendored
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
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;
|
||||||
24
uni_modules/Sansnn-uQRCode/components/uqrcode/gcanvas/env/tool.js
vendored
Normal file
24
uni_modules/Sansnn-uQRCode/components/uqrcode/gcanvas/env/tool.js
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
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 });
|
||||||
|
canvas.width = el.style.width;
|
||||||
|
canvas.height = el.style.height;
|
||||||
|
|
||||||
|
return canvas;
|
||||||
|
};
|
||||||
485
uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue
Normal file
485
uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue
Normal file
@@ -0,0 +1,485 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uqrcode" :style="{'width': `${size}px`, 'height': `${size}px`}">
|
||||||
|
<block v-if="!isReload">
|
||||||
|
<!-- canvas模式，默认 -->
|
||||||
|
<block v-if="mode === 'canvas'">
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<gcanvas class="uqrcode-canvas" ref="gcanvas" :style="{'width': `${size}px`, 'height': `${size}px`}"></gcanvas>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<canvas class="uqrcode-canvas" :id="id" :canvas-id="id" :style="{'width': `${size}px`, 'height': `${size}px`}"></canvas>
|
||||||
|
<!-- #endif -->
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<!-- view模式，兼容 -->
|
||||||
|
<view v-else-if="mode === 'view'" class="uqrcode-view" :style="{
|
||||||
|
'width': `${size}px`,
|
||||||
|
'height': `${size}px`,
|
||||||
|
'padding': `${margin}px`,
|
||||||
|
'background-color': backgroundColor
|
||||||
|
}">
|
||||||
|
<view class="uqrcode-view-row" v-for="(row, rowIndex) in modules.length" :key="rowIndex">
|
||||||
|
<view class="uqrcode-view-col" v-for="(col, colIndex) in modules.length" :key="colIndex" :style="{
|
||||||
|
'width': `${tileSize}px`,
|
||||||
|
'height': `${tileSize}px`,
|
||||||
|
'background-color': modules[rowIndex][colIndex] ? foregroundColor : backgroundColor
|
||||||
|
}">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<!-- 生成二维码的loading效果 -->
|
||||||
|
<!-- <view class="uqrcode-makeing" :class="{'uqrcode-make-complete': !makeing}">loading...</view> -->
|
||||||
|
|
||||||
|
<!-- H5保存提示 -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="uqrcode-h5-save" v-if="isH5Save">
|
||||||
|
<image class="uqrcode-h5-save-image" :src="tempFilePath"></image>
|
||||||
|
<text class="uqrcode-h5-save-text">请长按二维码进行保存</text>
|
||||||
|
<view class="uqrcode-h5-save-close" @click="isH5Save=false">
|
||||||
|
<view class="uqrcode-h5-save-close-before"></view>
|
||||||
|
<view class="uqrcode-h5-save-close-after"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/* 引入uqrcode核心js */
|
||||||
|
import uqrcode from './common/uqrcode'
|
||||||
|
|
||||||
|
/* 引入nvue所需模块 */
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
import {
|
||||||
|
enable,
|
||||||
|
WeexBridge
|
||||||
|
} from './gcanvas'
|
||||||
|
let modal = weex.requireModule("modal")
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'uqrcode',
|
||||||
|
props: {
|
||||||
|
// id
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: uuid()
|
||||||
|
},
|
||||||
|
// 生成模式
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'canvas' // canvas|view (nvue不支持canvas模式)
|
||||||
|
},
|
||||||
|
// 二维码内容
|
||||||
|
text: String,
|
||||||
|
// 二维码大小
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 256
|
||||||
|
},
|
||||||
|
// 填充边距
|
||||||
|
margin: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 背景色
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#FFFFFF'
|
||||||
|
},
|
||||||
|
// 前景色
|
||||||
|
foregroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#000000'
|
||||||
|
},
|
||||||
|
// 纠错等级
|
||||||
|
errorCorrectLevel: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: uqrcode.errorCorrectLevel.H
|
||||||
|
},
|
||||||
|
// 版本
|
||||||
|
typeNumber: {
|
||||||
|
type: Number,
|
||||||
|
default: -1
|
||||||
|
},
|
||||||
|
// 导出的文件类型
|
||||||
|
fileType: {
|
||||||
|
type: String,
|
||||||
|
default: 'png'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
canvasContext: null,
|
||||||
|
makeing: false,
|
||||||
|
delegate: null,
|
||||||
|
delegateParams: null,
|
||||||
|
tempFilePath: '',
|
||||||
|
isH5Save: false,
|
||||||
|
isReload: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
modules() {
|
||||||
|
let options = {
|
||||||
|
...this.$props
|
||||||
|
}
|
||||||
|
if (typeof options.errorCorrectLevel === 'string') {
|
||||||
|
options.errorCorrectLevel = uqrcode.errorCorrectLevel[options.errorCorrectLevel]
|
||||||
|
}
|
||||||
|
return uqrcode.getModules(options)
|
||||||
|
},
|
||||||
|
tileSize() {
|
||||||
|
return (this.size - this.margin * 2) / this.modules.length
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
/* 深度监听props，任意属性一发生改变立即重绘二维码 */
|
||||||
|
$props: {
|
||||||
|
handler() {
|
||||||
|
this.reload()
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
makeing(val) {
|
||||||
|
if (!val) {
|
||||||
|
if (typeof this.delegate === 'function') {
|
||||||
|
this.delegate(this.delegateParams)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.make()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
reload() {
|
||||||
|
/* 重载组件 */
|
||||||
|
this.isReloadMake = true
|
||||||
|
this.isReload = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.isReload = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.make()
|
||||||
|
}, 150)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
make() {
|
||||||
|
if (this.makeing) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.makeing = true
|
||||||
|
if (this.mode === 'canvas') {
|
||||||
|
let ctx = null
|
||||||
|
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
/* 获取元素引用 */
|
||||||
|
let gcanvas = this.$refs["gcanvas"]
|
||||||
|
/* 通过元素引用获取canvas对象 */
|
||||||
|
let canvasObj = enable(gcanvas, {
|
||||||
|
bridge: WeexBridge
|
||||||
|
})
|
||||||
|
/* 获取绘图所需的上下文，目前不支持3d */
|
||||||
|
ctx = canvasObj.getContext('2d')
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
/* 获取绘图所需的上下文 */
|
||||||
|
ctx = uni.createCanvasContext(this.id, this)
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
this.canvasContext = ctx
|
||||||
|
|
||||||
|
ctx.draw() // 清空之前的画布内容
|
||||||
|
ctx.setFillStyle(this.backgroundColor)
|
||||||
|
ctx.fillRect(0, 0, this.size, this.size)
|
||||||
|
|
||||||
|
for (var row = 0; row < this.modules.length; row++) {
|
||||||
|
for (var col = 0; col < this.modules.length; col++) {
|
||||||
|
// 计算每一个小块的位置
|
||||||
|
var x = col * this.tileSize + this.margin
|
||||||
|
var y = row * this.tileSize + this.margin
|
||||||
|
var w = this.tileSize
|
||||||
|
var h = this.tileSize
|
||||||
|
|
||||||
|
var style = this.modules[row][col] ? this.foregroundColor : this.backgroundColor
|
||||||
|
ctx.setFillStyle(style)
|
||||||
|
ctx.fillRect(x, y, w, h)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.draw(false, () => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
this.complete()
|
||||||
|
// }, 3000)
|
||||||
|
})
|
||||||
|
} else if (this.mode === 'view') {
|
||||||
|
this.complete()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
complete(e = {}) {
|
||||||
|
let basic = {
|
||||||
|
id: this.id,
|
||||||
|
text: this.text,
|
||||||
|
mode: this.mode
|
||||||
|
}
|
||||||
|
let ages = {
|
||||||
|
...basic,
|
||||||
|
...e
|
||||||
|
}
|
||||||
|
this.makeing = false
|
||||||
|
this.$emit('complete', ages)
|
||||||
|
},
|
||||||
|
toTempFilePath(callback = {}) {
|
||||||
|
if (typeof callback.success != 'function') {
|
||||||
|
callback.success = () => {}
|
||||||
|
}
|
||||||
|
if (typeof callback.fail != 'function') {
|
||||||
|
callback.fail = () => {}
|
||||||
|
}
|
||||||
|
if (typeof callback.complete != 'function') {
|
||||||
|
callback.complete = () => {}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.makeing) {
|
||||||
|
// 如果还在生成状态，那当前操作将托管到委托，监听生成完成后再通过委托复调当前方法
|
||||||
|
this.delegate = this.toTempFilePath
|
||||||
|
this.delegateParams = callback
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.delegate = null
|
||||||
|
this.delegateParams = null
|
||||||
|
}
|
||||||
|
|
||||||
|
let _this = this
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.canvasContext.toTempFilePath(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
_this.size * 3, // 不知道什么原因，最少要*3，不然输出的图片只有一个角
|
||||||
|
_this.size * 3, // 不知道什么原因，最少要*3，不然输出的图片只有一个角
|
||||||
|
_this.size,
|
||||||
|
_this.size,
|
||||||
|
_this.fileType,
|
||||||
|
1,
|
||||||
|
res => {
|
||||||
|
_this.tempFilePath = res.tempFilePath
|
||||||
|
callback.success(res)
|
||||||
|
callback.complete(res)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: this.id,
|
||||||
|
fileType: this.fileType,
|
||||||
|
width: this.size,
|
||||||
|
height: this.size,
|
||||||
|
success: res => {
|
||||||
|
this.tempFilePath = res.tempFilePath
|
||||||
|
callback.success(res)
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
callback.fail(err)
|
||||||
|
},
|
||||||
|
complete: res => {
|
||||||
|
callback.complete(res)
|
||||||
|
}
|
||||||
|
}, this)
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
save(callback = {}) {
|
||||||
|
if (typeof callback.success != 'function') {
|
||||||
|
callback.success = () => {}
|
||||||
|
}
|
||||||
|
if (typeof callback.fail != 'function') {
|
||||||
|
callback.fail = () => {}
|
||||||
|
}
|
||||||
|
if (typeof callback.complete != 'function') {
|
||||||
|
callback.complete = () => {}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toTempFilePath({
|
||||||
|
success: res => {
|
||||||
|
// #ifdef H5
|
||||||
|
this.isH5Save = true
|
||||||
|
callback.success({
|
||||||
|
msg: 'H5请长按图片保存'
|
||||||
|
})
|
||||||
|
callback.complete({
|
||||||
|
msg: 'H5请长按图片保存'
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: this.tempFilePath,
|
||||||
|
success: res1 => {
|
||||||
|
callback.success({
|
||||||
|
msg: '保存成功'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: err1 => {
|
||||||
|
callback.fail(err1)
|
||||||
|
},
|
||||||
|
complete: res1 => {
|
||||||
|
callback.complete(res1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
callback.fail(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function uuid(len = 32, firstU = true, radix = null) {
|
||||||
|
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
|
||||||
|
let uuid = [];
|
||||||
|
radix = radix || chars.length;
|
||||||
|
|
||||||
|
if (len) {
|
||||||
|
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
|
||||||
|
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
|
||||||
|
} else {
|
||||||
|
let r;
|
||||||
|
// rfc4122标准要求返回的uuid中,某些位为固定的字符
|
||||||
|
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
|
||||||
|
uuid[14] = '4';
|
||||||
|
|
||||||
|
for (let i = 0; i < 36; i++) {
|
||||||
|
if (!uuid[i]) {
|
||||||
|
r = 0 | Math.random() * 16;
|
||||||
|
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
|
||||||
|
if (firstU) {
|
||||||
|
uuid.shift();
|
||||||
|
return 'u' + uuid.join('');
|
||||||
|
} else {
|
||||||
|
return uuid.join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.uqrcode {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-makeing {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-make-complete {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-view {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-view-row {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-view-col {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifdef H5 */
|
||||||
|
.uqrcode-h5-save {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: rgba(0, 0, 0, 0.68);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-h5-save-image {
|
||||||
|
width: 512rpx;
|
||||||
|
height: 512rpx;
|
||||||
|
padding: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-h5-save-text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-h5-save-close {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 72rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border: 2rpx solid #FFFFFF;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-h5-save-close-before {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%) rotate(45deg);
|
||||||
|
width: 40rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uqrcode-h5-save-close-after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%) rotate(-45deg);
|
||||||
|
width: 40rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
82
uni_modules/Sansnn-uQRCode/package.json
Normal file
82
uni_modules/Sansnn-uQRCode/package.json
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
{
|
||||||
|
"id": "Sansnn-uQRCode",
|
||||||
|
"displayName": "uQRCode 二维码生成插件",
|
||||||
|
"version": "3.0.1",
|
||||||
|
"description": "uQRCode 是一款使用方式简单，易于扩展的二维码生成插件。",
|
||||||
|
"keywords": [
|
||||||
|
"uQRCode",
|
||||||
|
"二维码",
|
||||||
|
"qrcode"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/Sansnn/uQRCode",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"JS SDK",
|
||||||
|
"通用 SDK"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
210
uni_modules/Sansnn-uQRCode/readme.md
Normal file
210
uni_modules/Sansnn-uQRCode/readme.md
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
# uQRCode
|
||||||
|
|
||||||
|
uQRCode 生成方式简单，可扩展性高，如有复杂需求可通过自定义组件或修改源码完成需求。已测试H5、微信小程序、iPhoneXsMax真机、华为P20Pro真机。
|
||||||
|
|
||||||
|
支持自定义二维码渲染规则，可通过 `getModules` 方法得到矩阵信息后，自行实现canvas或view+css渲染二维码，如随机颜色、圆点、方块、块与块之间的间距等。
|
||||||
|
|
||||||
|
### 二维码
|
||||||
|
**什么是QR码**
|
||||||
|
|
||||||
|
QR码属于矩阵式二维码中的一个种类，由DENSO(日本电装)公司开发，由JIS和ISO将其标准化。
|
||||||
|
|
||||||
|
**QR码的特点**
|
||||||
|
|
||||||
|
一是高速读取(QR就是取自“Quick Response”的首字母)，通过摄像头从拍摄到解码到显示内容也就三秒左右，对摄像的角度也没有什么要求；
|
||||||
|
|
||||||
|
二是高容量、高密度，理论上内容经过压缩处理后可以存7089个数字，4296个字母和数字混合字符，2953个8位字节数据，1817个汉字；
|
||||||
|
|
||||||
|
三是支持纠错处理，按照QR码的标准文档说明，QR码的纠错分为4个级别，分别是：
|
||||||
|
- level L : 最大 7% 的错误能够被纠正；
|
||||||
|
- level M : 最大 15% 的错误能够被纠正；
|
||||||
|
- level Q : 最大 25% 的错误能够被纠正；
|
||||||
|
- level H : 最大 30% 的错误能够被纠正；
|
||||||
|
|
||||||
|
四是结构化，看似无规则的图形，其实对区域有严格的定义。
|
||||||
|
|
||||||
|
更多二维码介绍及原理：[https://blog.csdn.net/jason_ldh/article/details/11801355](https://blog.csdn.net/jason_ldh/article/details/11801355)
|
||||||
|
|
||||||
|
### 简单使用
|
||||||
|
|
||||||
|
在 `template` 中创建 `<uqrcode/>`，并指定生成内容 `text`
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uqrcode ref="uQRCode" text="uQRCode 3.0" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 属性说明
|
||||||
|
|
||||||
|
|属性名 |类型 |可选值 |默认值 |是否必填 |说明 |
|
||||||
|
|--- |--- |--- |--- |--- |:--- |
|
||||||
|
|id |String |- |随机生成 |否 |组件标识/canvasId |
|
||||||
|
|mode |String |canvas/view |canvas |否 |生成模式 |
|
||||||
|
|text |String |- |- |是 |二维码内容 |
|
||||||
|
|size |Number |- |256 |否 |二维码大小，单位px |
|
||||||
|
|margin |Number |- |0 |否 |填充边距，单位px |
|
||||||
|
|backgroundColor |String |- |#FFFFFF |否 |背景色 |
|
||||||
|
|foregroundColor |String |- |#000000 |否 |前景色 |
|
||||||
|
|errorCorrectLevel|String/Number|L/M/Q/H/1/0/3/2 |H |否 |纠错等级L/M/Q/H分别对应1/0/3/2 |
|
||||||
|
|typeNumber |Number |- |-1 |否 |版本 |
|
||||||
|
|fileType |String |png/jpg |png |否 |导出的文件类型 |
|
||||||
|
|
||||||
|
### 方法说明
|
||||||
|
|
||||||
|
|方法名|说明|
|
||||||
|
|---|:---|
|
||||||
|
|[toTempFilePath](#totempfilepathobject)|导出临时文件路径|
|
||||||
|
|[save](#saveobject)|保存二维码|
|
||||||
|
|
||||||
|
### toTempFilePath(OBJECT)
|
||||||
|
|
||||||
|
导出临时文件路径
|
||||||
|
|
||||||
|
**OBJECT参数说明**
|
||||||
|
|
||||||
|
|参数 |类型 |必填 |默认值 |说明 |
|
||||||
|
|--- |--- |--- |--- |:--- |
|
||||||
|
|success |Function |否 |- |方法调用成功的回调函数 |
|
||||||
|
|fail |Function |否 |- |方法调用失败的回调函数 |
|
||||||
|
|complete |Function |否 |- |方法调用结束的回调函数（调用成功、失败都会执行） |
|
||||||
|
|
||||||
|
#### 示例
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<uqrcode ref="uQRCode" text="uQRCode 3.0" />
|
||||||
|
<button @click="toTempFilePath">导出临时文件路径</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
toTempFilePath() {
|
||||||
|
this.$refs.uQRCode.toTempFilePath({
|
||||||
|
success: res => {
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### save(OBJECT)
|
||||||
|
|
||||||
|
保存二维码
|
||||||
|
|
||||||
|
**OBJECT参数说明**
|
||||||
|
|
||||||
|
|参数 |类型 |必填 |默认值 |说明 |
|
||||||
|
|--- |--- |--- |--- |:--- |
|
||||||
|
|success |Function |否 |- |方法调用成功的回调函数 |
|
||||||
|
|fail |Function |否 |- |方法调用失败的回调函数 |
|
||||||
|
|complete |Function |否 |- |方法调用结束的回调函数（调用成功、失败都会执行） |
|
||||||
|
|
||||||
|
#### 示例
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<uqrcode ref="uQRCode" text="uQRCode 3.0" />
|
||||||
|
<button @click="save">保存二维码</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
save() {
|
||||||
|
this.$refs.uQRCode.save({
|
||||||
|
success: res => {
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 高级使用
|
||||||
|
|
||||||
|
在 `template` 中创建 `<canvas/>` 并设置 `id`，画布宽高
|
||||||
|
|
||||||
|
```html
|
||||||
|
<canvas id="qrcode" canvas-id="qrcode" :style="{'width': `${size}px`, 'height': `${size}px`}" />
|
||||||
|
```
|
||||||
|
|
||||||
|
在 `script` 中引用js文件并调用方法生成矩阵
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
size: 256,
|
||||||
|
margin: 10,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
foregroundColor: '#000000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
let modules = uQRCode.getModules({
|
||||||
|
text: 'uQRCode 3.0',
|
||||||
|
errorCorrectLevel: uQRCode.errorCorrectLevel.H
|
||||||
|
})
|
||||||
|
let tileSize = (this.size - this.margin * 2) / modules.length
|
||||||
|
// 获取绘图所需的上下文
|
||||||
|
let ctx = uni.createCanvasContext('qrcode', this)
|
||||||
|
// 开始绘制
|
||||||
|
ctx.setFillStyle(this.backgroundColor)
|
||||||
|
ctx.fillRect(0, 0, this.size, this.size)
|
||||||
|
for (var row = 0; row < modules.length; row++) {
|
||||||
|
for (var col = 0; col < modules.length; col++) {
|
||||||
|
// 计算每一个小块的位置
|
||||||
|
var x = col * tileSize + this.margin
|
||||||
|
var y = row * tileSize + this.margin
|
||||||
|
var w = tileSize
|
||||||
|
var h = tileSize
|
||||||
|
|
||||||
|
var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
|
||||||
|
ctx.setFillStyle(style)
|
||||||
|
ctx.fillRect(x, y, w, h)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.draw()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### uqrcode.js 方法说明
|
||||||
|
|
||||||
|
|方法名|说明|
|
||||||
|
|---|:---|
|
||||||
|
|[getModules](#getmodulesoptions)|可以得到二维码矩阵信息，可根据返回的矩阵信息自行实现二维码生成|
|
||||||
|
|
||||||
|
### getModules(options)
|
||||||
|
|
||||||
|
根据内容得到二维码矩阵信息
|
||||||
|
|
||||||
|
|参数 |类型 |必填 |默认值 |说明 |
|
||||||
|
|--- |--- |--- |--- |:--- |
|
||||||
|
|text |String |是 |- |二维码内容 |
|
||||||
|
|errorCorrectLevel|Number |否 |2 |纠错等级，1/0/3/2分别对应L/M/Q/H |
|
||||||
|
|typeNumber |Number |否 |-1 |版本 |
|
||||||
|
|
||||||
|
### 常见问题
|
||||||
|
**关于高级使用二维码生成不完整**
|
||||||
|
|
||||||
|
size的单位是px，请尽量避免使用rpx，如果canvas的单位是rpx，那么不同设备屏幕分辨率不一样，rpx转换成px后的画布尺寸不足以放下全部内容，实际绘制图案超出，就会出现不完整或者没有填充完整画布的情况。
|
||||||
|
|
||||||
|
**如何扫码跳转指定网页**
|
||||||
|
|
||||||
|
text参数直接放入完整的网页地址即可，例如：`https://ext.dcloud.net.cn/plugin?id=1287`。微信客户端不能是ip地址。
|
||||||
|
|
||||||
|
**H5长按识别**
|
||||||
|
|
||||||
|
canvas无法长按识别，长按识别需要是图片才行，所以需要先调用`toTempFilePath`方法得到临时路径，再用image组件显示即可。
|
||||||
Reference in New Issue
Block a user