Commit b54a9412 authored by 潘永坪's avatar 潘永坪

无用组件删除

parent 60477c9c
......@@ -80,7 +80,6 @@ export default {
<style lang="scss">
@import "uview-ui/index.scss";
/*
1.页面背景颜色#f7f7f7
2.分隔线颜色#DBDBDB
......
......@@ -19,6 +19,22 @@ export default{
var today = now.getFullYear()+'-'+(month)+'-'+(day)
return today
},
tomorrow:function(){//明天
var tomorrow = new Date()
tomorrow.setTime(tomorrow.getTime() + 24*60*60*1000)
var day = ('0' + tomorrow.getDate()).slice(-2)
var month = ('0' + (tomorrow.getMonth() + 1)).slice(-2)
var tomorrowStr = tomorrow.getFullYear()+'-'+month+'-'+day
return tomorrowStr
},
afterTomorrow:function(){//后天
var afterTomorrow = new Date()
afterTomorrow.setTime(afterTomorrow.getTime() + 2*24*60*60*1000)
var day = ('0' + afterTomorrow.getDate()).slice(-2)
var month = ('0' + (afterTomorrow.getMonth() + 1)).slice(-2)
var tomorrowStr = afterTomorrow.getFullYear()+'-'+month+'-'+day
return tomorrowStr
},
todayTime:function(){
var now = new Date()
var hour = now.getHours()<10?'0'+now.getHours():now.getHours()
......
// 引入公共基础类
@import "./libs/css/common.scss";
@import "./libs/css/color.scss";
// 非nvue的样式
/* #ifndef APP-NVUE */
@import "./libs/css/style.vue.scss";
/* #endif */
// nvue的特有样式
/* #ifdef APP-NVUE */
@import "./libs/css/style.nvue.scss";
/* #endif */
// 小程序特有的样式
/* #ifdef MP */
@import "./libs/css/style.mp.scss";
/* #endif */
// H5特有的样式
/* #ifdef H5 */
@import "./libs/css/style.h5.scss";
/* #endif */
\ No newline at end of file
......@@ -5,8 +5,8 @@
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"networkTimeout":{
"request":30000//请求超时30
"networkTimeout" : {
"request" : 30000 //请求超时30
},
/* 5+App特有相关 */
"app-plus" : {
......
......@@ -310,6 +310,15 @@
"enablePullDownRefresh": false
}
}
,{
"path" : "scenicOrder/scenicOrder",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
},
{
......
......@@ -96,7 +96,7 @@
取片地址:
</text>
<text>
{{extendContent.projectAddress}}
{{extendContent.projectAddress||''}}
</text>
</view>
......@@ -114,7 +114,7 @@
咨询电话:
</text>
<text>
{{extendContent.projectPhone}}
{{extendContent.projectPhone||''}}
</text>
</view>
<view>
......
......@@ -13,8 +13,8 @@
</template>
<script>
export default {
props: ["dateList"],
export default {
props: ['dateList'],
watch: {
dateList:{
handler(newValue, oldValue){
......@@ -41,35 +41,35 @@
//---年月日转化
formatDate(date) {
let year = date.getFullYear()
let month = date.getMonth() + 1;
let month = date.getMonth() + 1
if (month < 10) {
month = '0' + month
}
let days = date.getDate();
let days = date.getDate()
if (days < 10) {
days = '0' + days
}
let dates = year + "-" + month + "-" + days
let dates = year + '-' + month + '-' + days
return dates
},
//---日期确认事件
onConfirm(date) {
this.show = false;
this.$emit("dateConfig", date[0])
this.show = false
this.$emit('dateConfig', date[0])
},
//---时间格式转换
formatter(day) {
let year = day.date.getFullYear()
let month = day.date.getMonth() + 1;
let month = day.date.getMonth() + 1
if (month < 10) {
month = '0' + month
}
let days = day.date.getDate();
let days = day.date.getDate()
if (days < 10) {
days = '0' + days
}
let dates = year + "-" + month + "-" + days
let dates = year + '-' + month + '-' + days
//真机调试手极端报错,暂时注释
// this.dateList.forEach((item, index) => {
// if (item.startTime.substr(0, 10) == dates) {
......@@ -84,14 +84,14 @@
},
//---设置默认日期方法
setDefaultDate(val) {
let dates = val.split("-")
let dates = val.split('-')
let year = parseInt(dates[0])
let month = parseInt(dates[1]) - 1
let day = parseInt(dates[2])
this.defaultDate = new Date(year, month, day)
},
}
}
}
</script>
<style scoped="scoped">
......
......@@ -197,7 +197,6 @@
<view class="phoneNumber">
<text> 联系电话: </text>
<input type="number" maxlength="11" placeholder="请输入联系电话" v-model.trim="ticketPhone" />
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权获取</button>
</view>
</view>
</view>
......@@ -339,13 +338,13 @@
</template>
<script>
import calendar from '../../../components/calendar' //日历组件
import buyKnow from '../../../components/buyKnow' //购票须知
import detail from '../../../components/detail' //明细弹窗
import chooseArea from '../../../components/chooseArea' //选择站点
import contactList from '../../../components/contactList' //联系人弹窗
import editContacts from '../../../components/editContacts' //编辑联系人弹窗
import times from '../../../components/times' //更多时间弹窗
import calendar from '../scenicComponents/calendar' //日历组件
import buyKnow from '@/components/buyKnow.vue' //购票须知
import detail from '@/components/merchantDetail.vue' //明细弹窗
import chooseArea from '../scenicComponents/chooseArea' //选择站点
import contactList from '../scenicComponents/contactList' //联系人弹窗
import editContacts from '../scenicComponents/editContacts' //编辑联系人弹窗
import times from '../scenicComponents/times' //更多时间弹窗
export default {
components: {
......@@ -416,7 +415,7 @@ export default {
payBackground: '', //支付按钮背景颜色
showPaying: false, //是否显示支付中按钮
dateScroll: '', //日期滚动值
timeScroll: '' ,//时间滚动值
timeScroll: '' //时间滚动值
}
},
onLoad(option) {
......@@ -479,28 +478,6 @@ export default {
}
},
methods: {
//---获取手机号
getPhoneNumber (e) {
// 参数e是绑定的授权方法自动传入过来的, 为了获取到iv和encryptedData值,让后端解析手机号
let data={
sessionKey:uni.getStorageSync('sessionKey')||'',
companyId:uni.getStorageSync('companyId')||'',
appid:uni.getStorageSync('appid')||'',
encryptedData:e.detail.encryptedData,
iv:e.detail.iv,
}
this.$request('/wechat/douyin/getInfo', data).then(res => {
if (res.code == '00') {
let obj=JSON.parse(res.data)
this.ticketPhone=obj.phoneNumber||obj.purePhoneNumber
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---获取排号信息
getSortInfor() {
let data = {
......@@ -774,8 +751,8 @@ export default {
}
})
}
;(this.merchantCode = this.productIfo.merchantVo.code), //商户code
(this.productId = res.data.id) //产品id变化,重新赋值产品id
this.merchantCode = this.productIfo.merchantVo.code, //商户code
this.productId = res.data.id//产品id变化,重新赋值产品id
this.merchantId = res.data.merchantId //重新赋值商户id
this.beforeBookDays = res.data.beforeBookDays || 0 //提前预定天数
this.buyKnowData = res.data //购买须知,传给子组件
......@@ -1155,23 +1132,23 @@ export default {
setTimeout(() => {
this.showPaying = false
}, 6000)
this.preOrder()
// this.preOrder()
},
//---预下单
preOrder() {
//时间戳转化
let bookStartTime=''
if(this.$commonjs.today()==this.startDate.substr(0,10)){
let bookStartTime = ''
if (this.$commonjs.today() == this.startDate.substr(0, 10)) {
//如果是当天就取当前时间+10秒
bookStartTime = new Date().getTime()+10*1000
}else{
bookStartTime = new Date().getTime() + 10 * 1000
} else {
//不是当天就取开始时间
//手机兼容
let startDate=this.startDate.replace(/-/g, '/')
let startDate = this.startDate.replace(/-/g, '/')
bookStartTime = new Date(startDate).getTime()
}
//手机兼容
let endDate=this.endDate.replace(/-/g, '/')
let endDate = this.endDate.replace(/-/g, '/')
let bookEndTime = new Date(endDate).getTime()
//参数游客信息组装
let reservationInfoList = []
......@@ -1240,8 +1217,8 @@ export default {
if (errLogId) {
console.log('预下单失败', errNo, errMsg, errLogId)
}
if( errMsg || errNo){
console.log('支付失败',errNo, errMsg , orderId, outOrderNo)
if (errMsg || errNo) {
console.log('支付失败', errNo, errMsg, orderId, outOrderNo)
}
uni.showToast({
title: errMsg,
......@@ -1782,7 +1759,7 @@ export default {
background: #c0c0c0;
border-radius: 16rpx;
}
.btn .mask{
.btn .mask {
position: fixed;
top: 0;
left: 0;
......
// 此文件为uView的主题变量,这些变量目前只能通过uni.scss引入才有效,另外由于
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中,造成微信程序包太大,
// 故uni.scss只建议放scss变量名相关样式,其他的样式可以通过main.js或者App.vue引入
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;
$u-type-warning: #ff9900;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;
$u-type-warning-light: #fdf6ec;
$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;
$u-type-error: #fa3534;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;
$u-type-error-light: #fef0f0;
$u-type-info: #909399;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;
$u-type-info-light: #f4f4f5;
$u-form-item-height: 70rpx;
$u-form-item-border-color: #dcdfe6;
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
# 介绍
`uQRCode`是一款基于`Javascript`环境开发的二维码生成插件,适用所有`Javascript`运行环境的前端应用和`Node.js`应用。
`uQRCode`可扩展性高,它支持自定义渲染二维码,可通过`uQRCode API`得到二维码绘制关键信息后,使用`canvas``svg``js`操作`dom`的方式绘制二维码图案。还可自定义二维码样式,如随机颜色、圆点、方块、块与块之间的间距等。
欢迎加入群聊【uQRCode交流群】:[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)
# 设计器
uQRCode发布了配套的可视化设计器,可根据自己喜好在设计器中设计二维码样式,一键生成配置代码复制到项目中,详情请在微信小程序搜索“柚子二维码”,或扫描下方小程序码体验。
![uQRCode设计器](https://uqrcode.cn/mp_weixin_code.jpg)
## 设计器模板示例
![uQRCode设计器](https://uqrcode.cn/yz_1.png)
![uQRCode设计器](https://uqrcode.cn/yz_2.png)
![uQRCode设计器](https://uqrcode.cn/yz_3.png)
![uQRCode设计器](https://uqrcode.cn/yz_4.png)
![uQRCode设计器](https://uqrcode.cn/yz_5.png)
![uQRCode设计器](https://uqrcode.cn/yz_6.png)
![uQRCode设计器](https://uqrcode.cn/yz_7.png)
![uQRCode设计器](https://uqrcode.cn/yz_8.png)
![uQRCode设计器](https://uqrcode.cn/yz_9.png)
# 快速上手
> 在`uni-app`中,我们更推荐使用组件方式来生成二维码,组件方式大大提高了页面的可读性以及避开了一些平台容易出问题的地方,当组件无法满足需求的时候,再考虑切换成原生方式。
官方文档:[https://uqrcode.cn/doc](https://uqrcode.cn/doc)
github地址:[https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)
npm地址:[https://www.npmjs.com/package/uqrcodejs](https://www.npmjs.com/package/uqrcodejs)
uni-app插件市场地址:[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)
## 原生方式
原生方式仅需要获取`uqrcode.js`文件便可使用。详细配置请移步到:文档 > [原生](https://uqrcode.cn/doc/document/native.html)
### 安装
1. 通过`npm`安装,成功后即可使用`import``require`进行引用。
``` bash
# npm安装
npm install uqrcodejs
# 或者
npm install @uqrcode/js
```
2. 通过项目开源地址获取`uqrcode.js`,下载`uqrcode.js`后,将其复制到您项目指定目录,在页面中引入`uqrcode.js`文件即可开始使用。
### 引入
- 通过`import`引入。
``` javascript
// npm安装
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
// 或者
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
```
- `Node.js`通过`require`引入。
``` javascript
// npm安装
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
// 或者
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js
```
- 原生浏览器环境,在js脚本加载时添加到`window`
``` html
<script type="text/javascript" src="uqrcode.js"></script>
<script>
var UQRCode = window.UQRCode;
</script>
```
### 简单用法
`uQRCode`基于`Canvas API`封装了一套方法,建议开发者使用`canvas`生成,一键调用,非常方便。以下是示例:
- HTML示例
- DOM部分
``` html
<canvas id="qrcode" width="200" height="200"></canvas>
```
- JS部分
``` javascript
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas元素
var canvas = document.getElementById("qrcode");
// 获取canvas上下文
var canvasContext = canvas.getContext("2d");
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
```
- uni-app示例
- Template部分
``` html
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
```
- JS部分
``` javascript
onReady() {
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
}
```
- 微信小程序,推荐使用Canvas 2D,关于Canvas 2D的使用请参考微信开放文档。
### 高级用法
考虑到部分平台可能不支持`canvas`,所以`uQRCode`并没有强制要求和`canvas`一起使用,您还可以选择其他方式来生成二维码,例如使用`js`操作`dom`进行绘制或是使用`svg`绘制等。以下是示例:
- uni-app v-for+view
```html
<template>
<view>
<view class="qrcode">
<view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
<view v-for="(col, colI) in row" :key="colI">
<view v-if="col.isBlack" style="width: 10px;height: 10px;background-color: black;">
<!-- 黑色码点 -->
</view>
<view v-else style="width: 10px;height: 10px;background-color: white;">
<!-- 白色码点 -->
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
export default {
data() {
return {
modules: []
}
},
onLoad() {
const qr = new UQRCode();
qr.data = 'uQRCode';
qr.make();
this.modules = qr.modules;
},
methods: {
}
}
</script>
```
- js操作dom
``` html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>uQRCode二维码生成</title>
</head>
<body>
<div id="qrcode" style="position: relative;"></div>
<script type="text/javascript" src="uqrcode.js"></script>
<script>
// 引入uQRCode
var UQRCode = window.UQRCode;
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 设置二维码前景图,可以是路径
qr.foregroundImageSrc =
'data:image/png;base64,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';
// 调用制作二维码方法
qr.make();
var drawModules = qr.getDrawModules();
// 遍历drawModules创建dom元素
var qrHtml = '';
for (var i = 0; i < drawModules.length; i++) {
var drawModule = drawModules[i];
switch (drawModule.type) {
case 'tile':
/* 绘制小块 */
qrHtml += `<div style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;background: ${drawModule.color};"></div>`;
break;
case 'image':
/* 绘制图像 */
qrHtml += `<img style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;" src="${drawModule.imageSrc}" />`;
break;
}
}
document.getElementById('qrcode').innerHTML = qrHtml;
</script>
</body>
</html>
```
- svg
``` html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>uQRCode二维码生成</title>
</head>
<body>
<svg id="qrcode" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
<script type="text/javascript" src="uqrcode.js"></script>
<script>
// 引入uQRCode
var UQRCode = window.UQRCode;
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 设置二维码前景图,可以是路径
qr.foregroundImageSrc =
'data:image/png;base64,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';
// 调用制作二维码方法
qr.make();
var drawModules = qr.getDrawModules();
// 遍历drawModules创建svg元素
var qrHtml = '';
for (var i = 0; i < drawModules.length; i++) {
var drawModule = drawModules[i];
switch (drawModule.type) {
case 'tile':
/* 绘制小块 */
qrHtml += `<rect x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" style="fill: ${drawModule.color};" />`;
break;
case 'image':
/* 绘制图像 */
qrHtml += `<image href="${drawModule.imageSrc}" x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" />`;
break;
}
}
document.getElementById('qrcode').innerHTML = qrHtml;
</script>
</body>
</html>
```
> 更多用法大家自行探索咯,期待分享哟~
### 导出临时文件路径
原生方式基于`Canvas`的,请自行参阅各平台`Canvas`的导出方式。以下是部分示例:
- uni-app
```javascript
// 通过uni.createCanvasContext方式创建绘制上下文的,对应导出API为uni.canvasToTempFilePath
// 调用完ctx.draw()方法后不能第一时间导出,否则会异常,需要有一定的延时
setTimeout(() => {
uni.canvasToTempFilePath(
{
canvasId: this.canvasId,
fileType: this.fileType,
width: this.canvasWidth,
height: this.canvasHeight,
success: res => {
console.log(res);
},
fail: err => {
console.log(err);
}
},
// this // 组件内使用必传当前实例
);
}, 300);
```
- Canvas2D
```javascript
// 得到base64
console.log(canvas.toDataURL());
// 得到buffer
console.log(canvas.toBuffer());
```
### 保存二维码到本地相册
必须在导出临时文件路径成功后再执行保存。uni-app通用保存方式(H5除外):
```javascript
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: res => {
console.log(res);
},
fail: err => {
console.log(err);
}
});
```
H5可以通过设置`<a>`标签`href`属性的方式进行保存:
```javascript
const aEle = document.createElement('a');
aEle.download = 'uQRCode'; // 设置下载的文件名,默认是'下载'
aEle.href = tempFilePath;
document.body.appendChild(aEle);
aEle.click();
aEle.remove(); // 下载之后把创建的元素删除
```
经过测试,PC端浏览器可以下载,部分安卓自带或第三方浏览器可以下载,安卓微信浏览器不适用,移动端iOS所有浏览器均不适用,差异较大,还是推荐各位导出文件给图片组件显示,然后提示用户通过长按图片进行保存这种方式。
## uni-app组件方式
### 安装
通过uni-app插件市场地址安装:[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)。详细配置请移步到:文档 > [uni-app组件](https://uqrcode.cn/doc/document/uni-app.html)。
### 引入
uni-app默认为easycom模式,可直接键入`<uqrcode>`标签。
### 简单用法
安装`uqrcode`组件后,在`template`中键入`<uqrcode/>`。设置`ref`属性可使用组件内部方法,`canvas-id`属性为组件内部的canvas组件标识,`value`属性为二维码生成对应内容,`options`为配置选项,可配置二维码样式,绘制Logo等,详见:[options](https://uqrcode.cn/doc/document/uni-app.html#options) 。
``` html
<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>
```
### 导出临时文件路径
为了保证方法调用成功,请在 [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 事件返回`success=true`后调用。
```javascript
// uqrcode为组件的ref名称
this.$refs.uqrcode.toTempFilePath({
success: res => {
console.log(res);
}
});
```
### 保存二维码到本地相册
为了保证方法调用成功,请在 [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 事件返回`success=true`后调用。
```javascript
// uqrcode为组件的ref名称
this.$refs.uqrcode.save({
success: () => {
uni.showToast({
icon: 'success',
title: '保存成功'
});
}
});
```
## 更多使用说明请前往官方文档查看:[https://uqrcode.cn/doc](https://uqrcode.cn/doc)。
\ No newline at end of file
## 4.0.6(2022-12-12)
修复`getDrawModules`,第一次获取结果正常,后续获取`tile`模块不存在的问题;
修复安卓type:normal因Canvas API使用了小数或为0的参数导致生成异常的问题(注:安卓非2d Canvas部分API参数不支持携带小数,部分API参数必须大于0)。
## 4.0.1(2022-11-28)
优化组件loading属性的表现;
新增组件type选项normal,以便于在某些条件编译初始为type=2d时还可以选择使用非2d组件类型;
修复组件条件编译在其他编辑器语法提示报错;
修复原生对es5的支持。
## 4.0.0(2022-11-21)
v4版本源代码全面开放,开源地址:[https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)
升级说明:v4为大版本更新,虽然已尽可能兼容上一代版本,但不可避免的还是存在一些细节差异,若更新后出现问题,请参考对照[v3 文档](https://uqrcode.cn/doc/v3)[v4 文档](https://uqrcode.cn/doc)进行修改。
export const cacheImageList = [];
\ No newline at end of file
function Queue() {
let waitingQueue = this.waitingQueue = [];
let isRunning = this.isRunning = false; // 记录是否有未完成的任务
function execute(task, resolve, reject) {
task()
.then((data) => {
resolve(data);
})
.catch((e) => {
reject(e);
})
.finally(() => {
// 等待任务队列中如果有任务,则触发它;否则设置isRunning = false,表示无任务状态
if (waitingQueue.length) {
const next = waitingQueue.shift();
execute(next.task, next.resolve, next.reject);
} else {
isRunning = false;
}
});
}
this.exec = function(task) {
return new Promise((resolve, reject) => {
if (isRunning) {
waitingQueue.push({
task,
resolve,
reject
});
} else {
isRunning = true;
execute(task, resolve, reject);
}
});
}
}
/* 队列实例,某些平台一起使用多个组件时需要通过队列逐一绘制,否则部分绘制方法异常,nvue端的iOS gcanvas尤其明显,在不通过队列绘制时会出现图片丢失的情况 */
export const queueDraw = new Queue();
export const queueLoadImage = new Queue();
\ No newline at end of file
declare module '*/common/cache' {
export const cacheImageList: Array;
}
\ No newline at end of file
declare module '*/common/queue' {
export const queueDraw: any;
export const queueLoadImage: any;
}
\ No newline at end of file
<template>
<view class="uqrcode" :class="{ 'uqrcode-hide': hide }" :style="{ width: `${templateOptions.width}px`, height: `${templateOptions.height}px` }">
<view class="uqrcode-canvas-wrapper">
<!-- 画布 -->
<!-- #ifndef APP-NVUE -->
<canvas class="uqrcode-canvas" :id="canvasId" :canvas-id="canvasId" :type="canvasType" :style="{
width: `${templateOptions.canvasWidth}px`,
height: `${templateOptions.canvasHeight}px`,
transform: templateOptions.canvasTransform
}" v-if="templateOptions.canvasDisplay" @click="onClick"></canvas>
<!-- #endif -->
<!-- nvue用gcanvas -->
<!-- #ifdef APP-NVUE -->
<gcanvas class="uqrcode-canvas" ref="gcanvas" :style="{
width: `${templateOptions.canvasWidth}px`,
height: `${templateOptions.canvasHeight}px`
}" v-if="templateOptions.canvasDisplay" @click="onClick"></gcanvas>
<!-- #endif -->
</view>
<!-- 加载效果 -->
<view class="uqrcode-makeing" v-if="loading === undefined ? makeing : loading">
<slot name="loading">
<image class="uqrcode-makeing-image" :style="{ width: `${templateOptions.size / 4}px`, height: `${templateOptions.size / 4}px` }"
src="data:image/gif;base64,R0lGODlhAAEAAfIEAOHh4SSsWuDg4N3d3f///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODhGMzM4RDEwMTExRUM4MDhCRkVBQkE2QUZDQzkwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAyODhGMzM5RDEwMTExRUM4MDhCRkVBQkE2QUZDQzkwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4OEYzMzZEMTAxMTFFQzgwOEJGRUFCQTZBRkNDOTAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4OEYzMzdEMTAxMTFFQzgwOEJGRUFCQTZBRkNDOTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQ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">
</image>
</slot>
</view>
<!-- 错误处理 -->
<view class="uqrcode-error" v-if="isError" @click="onClick">
<slot name="error" :error="error">
<text class="uqrcode-error-message">{{ error.errMsg }}</text>
</slot>
</view>
<!-- H5保存提示 -->
<!-- #ifdef H5 -->
<view class="uqrcode-h5-save" v-if="isH5Save">
<slot name="h5save" :tempFilePath="tempFilePath">
<image class="uqrcode-h5-save-image" :src="tempFilePath"></image>
<text class="uqrcode-h5-save-text">{{ h5SaveIsDownload ? '若保存失败,' : '' }}请长按二维码进行保存</text>
</slot>
<view class="uqrcode-h5-save-close" @click.stop="isH5Save = false">
<view class="uqrcode-h5-save-close-before"></view>
<view class="uqrcode-h5-save-close-after"></view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
// #ifdef VUE3
import {
toRaw
} from 'vue';
// #endif
/* 引入uQRCode核心js */
import UQRCode from '../../js_sdk/uqrcode/uqrcode';
/* 引入nvue所需模块 */
// #ifdef APP-NVUE
import {
enable,
WeexBridge
} from '../../js_sdk/gcanvas';
const modal = weex.requireModule('modal');
// #endif
/* 引入队列 */
import {
queueDraw,
queueLoadImage
} from '../../common/queue';
/* 引入缓存图片 */
import {
cacheImageList
} from '../../common/cache';
let instance = null;
export default {
name: 'uqrcode',
props: {
/**
* canvas组件id
*/
canvasId: {
type: String,
required: true // canvasId在微信小程序初始值不能为空,created中赋值也不行,必须给一个值,否则挂载组件后无法绘制。不考虑用随机id,uuid
},
/**
* 二维码内容
*/
value: {
type: [String, Number]
},
/**
* 选项
*/
options: {
type: Object,
default: () => {
return {};
}
},
/**
* 二维码大小
*/
size: {
type: [String, Number],
default: 200
},
/**
* 二维码尺寸单位
*/
sizeUnit: {
type: String,
default: 'px'
},
/**
* 导出的文件类型
*/
fileType: {
type: String,
default: 'png'
},
/**
* 是否初始化组件后就开始生成
*/
start: {
type: Boolean,
default: true
},
/**
* 是否数据发生改变自动重绘
*/
auto: {
type: Boolean,
default: true
},
/**
* 隐藏组件
*/
hide: {
type: Boolean,
default: false
},
/**
* canvas 类型,微信小程序默认使用2d,非2d微信官方已放弃维护,问题比较多
* 注意:微信小程序type2d手机上正常,PC上微信内打开小程序toDataURL报错,看后期微信官方团队会不会做兼容,不兼容的话只能在自行判断在PC使用非2d,或者直接提示用户请在手机上操作,微信团队的海报中心小程序就是这么做的
*/
type: {
type: String,
default: () => {
// #ifdef MP-WEIXIN
return '2d';
// #endif
// #ifndef MP-WEIXIN
return 'normal';
// #endif
}
},
/**
* 队列绘制,主要针对NVue端
*/
queue: {
type: Boolean,
default: false
},
/**
* 是否队列加载图片,可减少canvas发起的网络资源请求,节省服务器资源
*/
isQueueLoadImage: {
type: Boolean,
default: false
},
/**
* loading态
*/
loading: {
type: Boolean,
default: undefined
},
/**
* H5保存即自动下载(在支持的环境下),默认false为仅弹层提示用户需要长按图片保存,不会自动下载
*/
h5SaveIsDownload: {
type: Boolean,
default: false
},
/**
* H5下载名称
*/
h5DownloadName: {
type: String,
default: 'uQRCode'
}
},
data() {
return {
canvas: undefined,
canvasType: undefined,
canvasContext: undefined,
makeDelegate: undefined,
drawDelegate: undefined,
toTempFilePathDelegate: undefined,
makeExecuted: false,
makeing: false,
drawing: false,
isError: false,
error: undefined,
isH5Save: false,
tempFilePath: '',
templateOptions: {
size: 0,
width: 0, // 组件宽度
height: 0,
canvasWidth: 0, // canvas宽度
canvasHeight: 0,
canvasTransform: '',
canvasDisplay: false
},
uqrcodeOptions: {
data: ''
},
plugins: [],
makeingPattern: [
[
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true]
],
[
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, true, true, true, false, true, true, true],
[true, true, true, true, true, true, false, true, true, true],
[true, true, true, true, true, true, false, true, true, true]
],
[
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, true, true, true, true, false, false, false],
[true, true, true, true, true, true, true, false, false, false],
[true, true, true, true, true, true, true, false, false, false],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true]
],
[
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true]
]
]
};
},
watch: {
type: {
handler(val) {
const types = ['2d'];
if (types.includes(val)) {
this.canvasType = val;
} else {
this.canvasType = undefined;
}
},
immediate: true
},
value: {
handler() {
if (this.auto) {
this.remake();
}
}
},
size: {
handler() {
if (this.auto) {
this.remake();
}
}
},
options: {
handler() {
if (this.auto) {
this.remake();
}
},
deep: true
},
makeing: {
handler(val) {
if (!val) {
if (typeof this.toTempFilePathDelegate === 'function') {
this.toTempFilePathDelegate();
}
}
}
}
},
mounted() {
this.templateOptions.size = this.sizeUnit == 'rpx' ? uni.upx2px(this.size) : this.size;
this.templateOptions.width = this.templateOptions.size;
this.templateOptions.height = this.templateOptions.size;
this.templateOptions.canvasWidth = this.templateOptions.size;
this.templateOptions.canvasHeight = this.templateOptions.size;
if (this.canvasType == '2d') {
// #ifndef MP-WEIXIN
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
// #endif
} else {
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
}
if (this.start) {
this.make();
}
},
methods: {
/**
* 获取模板选项
*/
getTemplateOptions() {
var size = this.sizeUnit == 'rpx' ? uni.upx2px(this.size) : this.size;
return deepReplace(this.templateOptions, {
size,
width: size,
height: size
});
},
/**
* 获取插件选项
*/
getUqrcodeOptions() {
return deepReplace(this.options, {
data: String(this.value),
size: Number(this.templateOptions.size)
});
},
/**
* 重置画布
*/
resetCanvas(callback) {
this.templateOptions.canvasDisplay = false;
this.$nextTick(() => {
this.templateOptions.canvasDisplay = true;
this.$nextTick(() => {
callback && callback();
});
});
},
/**
* 绘制二维码
*/
async draw(callback = {}, isDrawDelegate = false) {
if (typeof callback.success != 'function') {
callback.success = () => {};
}
if (typeof callback.fail != 'function') {
callback.fail = () => {};
}
if (typeof callback.complete != 'function') {
callback.complete = () => {};
}
if (this.drawing) {
if (!isDrawDelegate) {
this.drawDelegate = () => {
this.draw(callback, true);
};
return;
}
} else {
this.drawing = true;
}
if (!this.canvasId) {
console.error('[uQRCode]: canvasId must be set!');
this.isError = true;
this.drawing = false;
callback.fail({
errMsg: '[uQRCode]: canvasId must be set!'
});
callback.complete({
errMsg: '[uQRCode]: canvasId must be set!'
});
return;
}
if (!this.value) {
console.error('[uQRCode]: value must be set!');
this.isError = true;
this.drawing = false;
callback.fail({
errMsg: '[uQRCode]: value must be set!'
});
callback.complete({
errMsg: '[uQRCode]: value must be set!'
});
return;
}
/* 组件数据 */
this.templateOptions = this.getTemplateOptions();
/* uQRCode选项 */
this.uqrcodeOptions = this.getUqrcodeOptions();
/* 纠错等级兼容字母写法 */
if (typeof this.uqrcodeOptions.errorCorrectLevel === 'string') {
this.uqrcodeOptions.errorCorrectLevel = UQRCode.errorCorrectLevel[this.uqrcodeOptions.errorCorrectLevel];
}
/* nvue不支持动态修改gcanvas尺寸,除nvue外,默认使用useDynamicSize */
// #ifndef APP-NVUE
if (typeof this.options.useDynamicSize === 'undefined') {
this.uqrcodeOptions.useDynamicSize = true;
}
// #endif
// #ifdef APP-NVUE
if (typeof this.options.useDynamicSize === 'undefined') {
this.uqrcodeOptions.useDynamicSize = false;
}
// if (typeof this.options.drawReserve === 'undefined') {
// this.uqrcodeOptions.drawReserve = true;
// }
// #endif
/* 获取uQRCode实例 */
const qr = instance = new UQRCode();
/* 注册扩展 */
this.plugins.forEach(p => qr.register(p.plugin));
/* 设置uQRCode选项 */
qr.setOptions(this.uqrcodeOptions);
/* 调用制作二维码方法 */
qr.make();
/* 获取canvas上下文 */
let canvasContext = null;
// #ifndef APP-NVUE
if (this.canvasType === '2d') {
// #ifdef MP-WEIXIN
/* 微信小程序获取canvas2d上下文方式 */
const canvas = (this.canvas = await new Promise(resolve => {
uni
.createSelectorQuery()
.in(this) // 在组件内使用需要
.select(`#${this.canvasId}`)
.fields({
node: true,
size: true
})
.exec(res => {
resolve(res[0].node);
});
}));
canvasContext = this.canvasContext = canvas.getContext('2d');
/* 2d的组件设置宽高与实际canvas绘制宽高不是一个,打个比方,组件size=200,canvas.width设置为100,那么绘制出来就是100=200,组件size=400,canvas.width设置为800,绘制大小还是800=400,所以无需理会下方返回的dynamicSize是多少,按dpr重新赋值给canvas即可 */
this.templateOptions.canvasWidth = qr.size;
this.templateOptions.canvasHeight = qr.size;
this.templateOptions.canvasTransform = '';
/* 使用dynamicSize+scale,可以解决小块间出现白线问题,dpr可以解决模糊问题 */
const dpr = uni.getSystemInfoSync().pixelRatio;
canvas.width = qr.dynamicSize * dpr;
canvas.height = qr.dynamicSize * dpr;
canvasContext.scale(dpr, dpr);
/* 微信小程序获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
/* 小程序下获取网络图片信息需先配置download域名白名单才能生效 */
return new Promise((resolve, reject) => {
const img = canvas.createImage();
img.src = src;
img.onload = () => {
resolve(img);
};
img.onerror = err => {
reject(err);
};
});
});
// #endif
// #ifndef MP-WEIXIN
/* 非微信小程序不支持2d,切换回uniapp获取canvas上下文方式 */
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId, this);
/* 使用dynamicSize,可以解决小块间出现白线问题,再通过scale缩放至size,使其达到所设尺寸 */
this.templateOptions.canvasWidth = qr.dynamicSize;
this.templateOptions.canvasHeight = qr.dynamicSize;
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
/* uniapp获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
return new Promise((resolve, reject) => {
if (src.startsWith('http')) {
uni.getImageInfo({
src,
success: res => {
resolve(res.path);
},
fail: err => {
reject(err);
}
});
} else {
if (src.startsWith('.')) {
console.error('[uQRCode]: 本地图片路径仅支持绝对路径!');
throw new Error('[uQRCode]: local image path only supports absolute path!');
} else {
resolve(src);
}
}
});
});
// #endif
} else {
/* uniapp获取canvas上下文方式 */
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId, this);
/* 使用dynamicSize,可以解决小块间出现白线问题,再通过scale缩放至size,使其达到所设尺寸 */
this.templateOptions.canvasWidth = qr.dynamicSize;
this.templateOptions.canvasHeight = qr.dynamicSize;
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
/* uniapp获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
return new Promise((resolve, reject) => {
/* getImageInfo在微信小程序的bug:本地路径返回路径会把开头的/或../移除,导致路径错误,解决方法:限制只能使用绝对路径 */
if (src.startsWith('http')) {
uni.getImageInfo({
src,
success: res => {
resolve(res.path);
},
fail: err => {
reject(err);
}
});
} else {
if (src.startsWith('.')) {
console.error('[uQRCode]: 本地图片路径仅支持绝对路径!');
throw new Error('[uQRCode]: local image path only supports absolute path!');
} else {
resolve(src);
}
}
});
});
}
// #endif
// #ifdef APP-NVUE
/* NVue获取canvas上下文方式 */
const gcanvas = this.$refs['gcanvas'];
const canvas = enable(gcanvas, {
bridge: WeexBridge
});
canvasContext = this.canvasContext = canvas.getContext('2d');
/* NVue获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
return new Promise((resolve, reject) => {
/* getImageInfo在nvue的bug:获取同一个路径的图片信息,同一时间第一次获取成功,后续失败,猜测是写入本地时产生文件写入冲突,所以没有返回,特别是对于网络资源 --- 已实现队列绘制,已解决此问题 */
if (src.startsWith('.')) {
console.error('[uQRCode]: 本地图片路径仅支持绝对路径!');
throw new Error('[uQRCode]: local image path only supports absolute path!');
} else {
uni.getImageInfo({
src,
success: res => {
resolve(res.path);
},
fail: err => {
reject(err);
}
});
}
});
});
// #endif
/* 设置uQRCode实例的canvas上下文 */
qr.canvasContext = canvasContext;
/* 延时等待页面重新绘制完毕 */
setTimeout(() => {
/* 从插件获取具体要调用哪一个扩展函数 */
var plugin = this.plugins.find(p => p.name == qr.style);
var drawCanvasName = plugin ? plugin.drawCanvas : 'drawCanvas';
/* 虽然qr[drawCanvasName]是直接返回Promise的,但由于js内部this指向问题,故不能直接exec(qr[drawCanvasName])此方式执行,需要改成exec(() => qr[drawCanvasName]())才能正确获取this */
var drawCanvas;
if (this.queue) {
drawCanvas = () => queueDraw.exec(() => qr[drawCanvasName]());
// drawCanvas = () => queueDraw.exec(() => new Promise((resolve, reject) => {
// setTimeout(() => {
// qr[drawCanvasName]().then(resolve).catch(reject);
// }, 1000);
// }));
} else {
drawCanvas = () => qr[drawCanvasName]();
}
/* 调用绘制方法将二维码图案绘制到canvas上 */
drawCanvas()
.then(() => {
if (this.drawDelegate) {
/* 高频重绘纠正 */
let delegate = this.drawDelegate;
this.drawDelegate = undefined;
delegate();
} else {
this.drawing = false;
callback.success();
}
})
.catch(err => {
console.log(err);
if (this.drawDelegate) {
/* 高频重绘纠正 */
let delegate = this.drawDelegate;
this.drawDelegate = undefined;
delegate();
} else {
this.drawing = false;
this.isError = true;
callback.fail(err);
}
})
.finally(() => {
callback.complete();
});
}, 300);
},
/**
* 生成二维码
*/
make(callback = {}) {
this.makeExecuted = true;
this.makeing = true;
this.isError = false;
if (typeof callback.success != 'function') {
callback.success = () => {};
}
if (typeof callback.fail != 'function') {
callback.fail = () => {};
}
if (typeof callback.complete != 'function') {
callback.complete = () => {};
}
this.resetCanvas(() => {
clearTimeout(this.makeDelegate);
this.makeDelegate = setTimeout(() => {
this.draw({
success: () => {
setTimeout(() => {
callback.success();
this.complete(true);
}, 300);
},
fail: err => {
callback.fail(err);
this.error = err;
this.complete(false, err.errMsg);
},
complete: () => {
callback.complete();
this.makeing = false;
}
});
}, 300);
});
},
/**
* 重新生成
*/
remake(callback) {
this.$emit('change');
this.make(callback);
},
/**
* 生成完成
*/
complete(success = true, errMsg = '') {
if (success) {
this.$emit('complete', {
success
});
} else {
this.$emit('complete', {
success,
errMsg
});
}
},
/**
* 导出临时路径
*/
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.makeExecuted) {
console.error('[uQRCode]: make() 方法从未调用!请先成功调用 make() 后再进行操作。');
var err = {
errMsg: '[uQRCode]: make() method has never been executed! please execute make() successfully before operating.'
};
callback.fail(err);
callback.complete(err);
return;
}
if (this.isError) {
callback.fail(this.error);
callback.complete(this.error);
return;
}
if (this.makeing) {
/* 如果还在生成状态,那当前操作将托管到委托,监听生成完成后再通过委托复调当前方法 */
this.toTempFilePathDelegate = () => {
this.toTempFilePath(callback);
};
return;
} else {
this.toTempFilePathDelegate = null;
}
// #ifndef APP-NVUE
if (this.canvasType === '2d') {
// #ifdef MP-WEIXIN
try {
let dataURL = null;
// #ifdef VUE3
dataURL = toRaw(this.canvas)
.toDataURL();
// #endif
// #ifndef VUE3
dataURL = this.canvas.toDataURL();
// #endif
callback.success({
tempFilePath: dataURL
});
callback.complete({
tempFilePath: dataURL
});
} catch (e) {
callback.fail(e);
callback.complete(e);
}
// #endif
} else {
uni.canvasToTempFilePath({
canvasId: this.canvasId,
fileType: this.fileType,
width: Number(this.templateOptions.canvasWidth),
height: Number(this.templateOptions.canvasHeight),
destWidth: Number(this.templateOptions.size),
destHeight: Number(this.templateOptions.size),
success: res => {
callback.success(res);
},
fail: err => {
callback.fail(err);
},
complete: () => {
callback.complete();
}
},
this
);
}
// #endif
// #ifdef APP-NVUE
const dpr = uni.getSystemInfoSync().pixelRatio;
this.canvasContext.toTempFilePath(
0,
0,
this.templateOptions.canvasWidth * dpr,
this.templateOptions.canvasHeight * dpr,
this.templateOptions.size * dpr,
this.templateOptions.size * dpr,
'',
1,
res => {
callback.success(res);
callback.complete(res);
}
);
// #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 => {
// #ifndef H5
if (this.canvasType === '2d') {
// #ifdef MP-WEIXIN
/* 需要将 data:image/png;base64, 这段去除 writeFile 才能正常打开文件,否则是损坏文件,无法打开 */
const reg = new RegExp('^data:image/png;base64,', 'g');
const dataURL = res.tempFilePath.replace(reg, '');
const fs = wx.getFileSystemManager();
const tempFilePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}${
Math.random()
.toString()
.split('.')[1]
}.png`;
fs.writeFile({
filePath: tempFilePath, // 要写入的文件路径 (本地路径)
data: dataURL, // base64图片
encoding: 'base64',
success: res1 => {
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: res2 => {
callback.success(res2);
},
fail: err2 => {
callback.fail(err2);
},
complete: () => {
callback.complete();
}
});
},
fail: err => {
callback.fail(err);
},
complete: () => {
callback.complete();
}
});
// #endif
} else {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res1 => {
callback.success(res1);
},
fail: err1 => {
callback.fail(err1);
},
complete: () => {
callback.complete();
}
});
}
// #endif
// #ifdef H5
/* 可以在电脑浏览器下载,移动端iOS不行,安卓微信浏览器不行,安卓外部浏览器可以 */
this.isH5Save = true;
this.tempFilePath = res.tempFilePath;
if (this.h5SaveIsDownload) {
const aEle = document.createElement('a');
aEle.download = this.h5DownloadName; // 设置下载的文件名,默认是'下载'
aEle.href = res.tempFilePath;
document.body.appendChild(aEle);
aEle.click();
aEle.remove(); // 下载之后把创建的元素删除
}
callback.success({
errMsg: 'ok'
});
callback.complete({
errMsg: 'ok'
});
// #endif
},
fail: err => {
callback.fail(err);
callback.complete(err);
}
});
},
/**
* 注册click事件
*/
onClick(e) {
this.$emit('click', e);
},
/**
* 获取实例
*/
getInstance() {
return instance;
},
/**
* 注册扩展,组件仅支持注册type为style的drawCanvas扩展
* @param {Object} plugin
*/
registerStyle(plugin) {
if (plugin.Type != 'style') {
console.warn('[uQRCode]: registerStyle 仅支持注册 style 类型的扩展!');
return {
errMsg: 'registerStyle 仅支持注册 style 类型的扩展!'
};
}
if (typeof plugin === 'function') {
this.plugins.push({
plugin,
name: plugin.Name,
drawCanvas: plugin.DrawCanvas
});
}
},
getLoadImage(loadImage) {
var that = this;
if (typeof loadImage == 'function') {
return function(src) {
/* 判断是否是队列加载图片的 */
if (that.isQueueLoadImage) {
/* 解决iOS APP||NVUE同时绘制多个二维码导致图片丢失需使用队列 */
return queueLoadImage.exec(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const cache = cacheImageList.find(x => x.src == src);
if (cache) {
resolve(cache.img);
} else {
loadImage(src)
.then(img => {
cacheImageList.push({
src,
img
});
resolve(img);
})
.catch(err => {
reject(err);
});
}
}, 10);
});
});
} else {
return loadImage(src);
}
};
} else {
return function(src) {
return Promise.resolve(src);
};
}
}
}
};
/**
* 对象属性深度替换
* @param {Object} o 原始对象/默认对象/被替换的对象
* @param {Object} r 从这个对象里取值替换到o对象里
* @return {Object} 替换后的新对象
*/
function deepReplace(o = {}, r = {}, c = false) {
let obj;
if (c) {
// 从源替换
obj = o;
} else {
// 不替换源,copy一份备份来替换
obj = {
...o
};
}
for (let k in r) {
var vr = r[k];
if (vr != undefined) {
if (vr.constructor == Object) {
obj[k] = this.deepReplace(obj[k], vr);
} else if (vr.constructor == String && !vr) {
obj[k] = obj[k];
} else {
obj[k] = vr;
}
}
}
return obj;
}
</script>
<style scoped>
.uqrcode {
position: relative;
}
.uqrcode-hide {
position: fixed;
left: 7500rpx;
}
.uqrcode-canvas {
transform-origin: top left;
}
.uqrcode-makeing {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.uqrcode-makeing-image {
/* #ifndef APP-NVUE */
display: block;
max-width: 120px;
max-height: 120px;
/* #endif */
}
.uqrcode-error {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.uqrcode-error-message {
font-size: 12px;
color: #939291;
}
/* #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: 60rpx;
height: 60rpx;
border: 2rpx solid #ffffff;
border-radius: 60rpx;
padding: 10rpx;
}
.uqrcode-h5-save-close-before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 40rpx;
height: 4rpx;
background: #ffffff;
}
.uqrcode-h5-save-close-after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 40rpx;
height: 4rpx;
background: #ffffff;
}
/* #endif */
</style>
<template>
<view class="uqrcode" :class="{ 'uqrcode-hide': hide }" :style="{ width: `${templateOptions.width}px`, height: `${templateOptions.height}px` }">
<view class="uqrcode-canvas-wrapper">
<!-- 画布 -->
<!-- #ifndef APP-NVUE -->
<canvas class="uqrcode-canvas" :id="canvasId" :canvas-id="canvasId" :type="canvasType" :style="{
width: `${templateOptions.canvasWidth}px`,
height: `${templateOptions.canvasHeight}px`,
transform: templateOptions.canvasTransform
}" v-if="templateOptions.canvasDisplay" @click="onClick"></canvas>
<!-- #endif -->
<!-- nvue用gcanvas -->
<!-- #ifdef APP-NVUE -->
<gcanvas class="uqrcode-canvas" ref="gcanvas" :style="{
width: `${templateOptions.canvasWidth}px`,
height: `${templateOptions.canvasHeight}px`
}" v-if="templateOptions.canvasDisplay" @click="onClick"></gcanvas>
<!-- #endif -->
</view>
<!-- 加载效果 -->
<view class="uqrcode-makeing" v-if="loading === undefined ? makeing : loading">
<slot name="loading">
<image class="uqrcode-makeing-image" :style="{ width: `${templateOptions.size / 4}px`, height: `${templateOptions.size / 4}px` }"
src="data:image/gif;base64,R0lGODlhAAEAAfIEAOHh4SSsWuDg4N3d3f///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODhGMzM4RDEwMTExRUM4MDhCRkVBQkE2QUZDQzkwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAyODhGMzM5RDEwMTExRUM4MDhCRkVBQkE2QUZDQzkwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4OEYzMzZEMTAxMTFFQzgwOEJGRUFCQTZBRkNDOTAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4OEYzMzdEMTAxMTFFQzgwOEJGRUFCQTZBRkNDOTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQ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">
</image>
</slot>
</view>
<!-- 错误处理 -->
<view class="uqrcode-error" v-if="isError" @click="onClick">
<slot name="error" :error="error">
<text class="uqrcode-error-message">{{ error.errMsg }}</text>
</slot>
</view>
<!-- H5保存提示 -->
<!-- #ifdef H5 -->
<view class="uqrcode-h5-save" v-if="isH5Save">
<slot name="h5save" :tempFilePath="tempFilePath">
<image class="uqrcode-h5-save-image" :src="tempFilePath"></image>
<text class="uqrcode-h5-save-text">{{ h5SaveIsDownload ? '若保存失败,' : '' }}请长按二维码进行保存</text>
</slot>
<view class="uqrcode-h5-save-close" @click.stop="isH5Save = false">
<view class="uqrcode-h5-save-close-before"></view>
<view class="uqrcode-h5-save-close-after"></view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
// #ifdef VUE3
import {
toRaw
} from 'vue';
// #endif
/* 引入uQRCode核心js */
import UQRCode from '../../js_sdk/uqrcode/uqrcode';
/* 引入nvue所需模块 */
// #ifdef APP-NVUE
import {
enable,
WeexBridge
} from '../../js_sdk/gcanvas';
const modal = weex.requireModule('modal');
// #endif
/* 引入队列 */
import {
queueDraw,
queueLoadImage
} from '../../common/queue';
/* 引入缓存图片 */
import {
cacheImageList
} from '../../common/cache';
let instance = null;
export default {
name: 'uqrcode',
props: {
/**
* canvas组件id
*/
canvasId: {
type: String,
required: true // canvasId在微信小程序初始值不能为空,created中赋值也不行,必须给一个值,否则挂载组件后无法绘制。不考虑用随机id,uuid
},
/**
* 二维码内容
*/
value: {
type: [String, Number]
},
/**
* 选项
*/
options: {
type: Object,
default: () => {
return {};
}
},
/**
* 二维码大小
*/
size: {
type: [String, Number],
default: 200
},
/**
* 二维码尺寸单位
*/
sizeUnit: {
type: String,
default: 'px'
},
/**
* 导出的文件类型
*/
fileType: {
type: String,
default: 'png'
},
/**
* 是否初始化组件后就开始生成
*/
start: {
type: Boolean,
default: true
},
/**
* 是否数据发生改变自动重绘
*/
auto: {
type: Boolean,
default: true
},
/**
* 隐藏组件
*/
hide: {
type: Boolean,
default: false
},
/**
* canvas 类型,微信小程序默认使用2d,非2d微信官方已放弃维护,问题比较多
* 注意:微信小程序type2d手机上正常,PC上微信内打开小程序toDataURL报错,看后期微信官方团队会不会做兼容,不兼容的话只能在自行判断在PC使用非2d,或者直接提示用户请在手机上操作,微信团队的海报中心小程序就是这么做的
*/
type: {
type: String,
default: () => {
// #ifdef MP-WEIXIN
return '2d';
// #endif
// #ifndef MP-WEIXIN
return 'normal';
// #endif
}
},
/**
* 队列绘制,主要针对NVue端
*/
queue: {
type: Boolean,
default: false
},
/**
* 是否队列加载图片,可减少canvas发起的网络资源请求,节省服务器资源
*/
isQueueLoadImage: {
type: Boolean,
default: false
},
/**
* loading态
*/
loading: {
type: Boolean,
default: undefined
},
/**
* H5保存即自动下载(在支持的环境下),默认false为仅弹层提示用户需要长按图片保存,不会自动下载
*/
h5SaveIsDownload: {
type: Boolean,
default: false
},
/**
* H5下载名称
*/
h5DownloadName: {
type: String,
default: 'uQRCode'
}
},
data() {
return {
canvas: undefined,
canvasType: undefined,
canvasContext: undefined,
makeDelegate: undefined,
drawDelegate: undefined,
toTempFilePathDelegate: undefined,
makeExecuted: false,
makeing: false,
drawing: false,
isError: false,
error: undefined,
isH5Save: false,
tempFilePath: '',
templateOptions: {
size: 0,
width: 0, // 组件宽度
height: 0,
canvasWidth: 0, // canvas宽度
canvasHeight: 0,
canvasTransform: '',
canvasDisplay: false
},
uqrcodeOptions: {
data: ''
},
plugins: [],
makeingPattern: [
[
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true]
],
[
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, true, true, true, false, true, true, true],
[true, true, true, true, true, true, false, true, true, true],
[true, true, true, true, true, true, false, true, true, true]
],
[
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, true, true, true, true, false, false, false],
[true, true, true, true, true, true, true, false, false, false],
[true, true, true, true, true, true, true, false, false, false],
[true, true, true, false, false, false, false, true, true, true],
[true, true, true, false, false, false, false, true, true, true]
],
[
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, false, false, false, false, false, false, false],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true],
[true, true, true, true, true, true, true, true, true, true]
]
]
};
},
watch: {
type: {
handler(val) {
const types = ['2d'];
if (types.includes(val)) {
this.canvasType = val;
} else {
this.canvasType = undefined;
}
},
immediate: true
},
value: {
handler() {
if (this.auto) {
this.remake();
}
}
},
size: {
handler() {
if (this.auto) {
this.remake();
}
}
},
options: {
handler() {
if (this.auto) {
this.remake();
}
},
deep: true
},
makeing: {
handler(val) {
if (!val) {
if (typeof this.toTempFilePathDelegate === 'function') {
this.toTempFilePathDelegate();
}
}
}
}
},
mounted() {
this.templateOptions.size = this.sizeUnit == 'rpx' ? uni.upx2px(this.size) : this.size;
this.templateOptions.width = this.templateOptions.size;
this.templateOptions.height = this.templateOptions.size;
this.templateOptions.canvasWidth = this.templateOptions.size;
this.templateOptions.canvasHeight = this.templateOptions.size;
if (this.canvasType == '2d') {
// #ifndef MP-WEIXIN
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
// #endif
} else {
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
}
if (this.start) {
this.make();
}
},
methods: {
/**
* 获取模板选项
*/
getTemplateOptions() {
var size = this.sizeUnit == 'rpx' ? uni.upx2px(this.size) : this.size;
return deepReplace(this.templateOptions, {
size,
width: size,
height: size
});
},
/**
* 获取插件选项
*/
getUqrcodeOptions() {
return deepReplace(this.options, {
data: String(this.value),
size: Number(this.templateOptions.size)
});
},
/**
* 重置画布
*/
resetCanvas(callback) {
this.templateOptions.canvasDisplay = false;
this.$nextTick(() => {
this.templateOptions.canvasDisplay = true;
this.$nextTick(() => {
callback && callback();
});
});
},
/**
* 绘制二维码
*/
async draw(callback = {}, isDrawDelegate = false) {
if (typeof callback.success != 'function') {
callback.success = () => {};
}
if (typeof callback.fail != 'function') {
callback.fail = () => {};
}
if (typeof callback.complete != 'function') {
callback.complete = () => {};
}
if (this.drawing) {
if (!isDrawDelegate) {
this.drawDelegate = () => {
this.draw(callback, true);
};
return;
}
} else {
this.drawing = true;
}
if (!this.canvasId) {
console.error('[uQRCode]: canvasId must be set!');
this.isError = true;
this.drawing = false;
callback.fail({
errMsg: '[uQRCode]: canvasId must be set!'
});
callback.complete({
errMsg: '[uQRCode]: canvasId must be set!'
});
return;
}
if (!this.value) {
console.error('[uQRCode]: value must be set!');
this.isError = true;
this.drawing = false;
callback.fail({
errMsg: '[uQRCode]: value must be set!'
});
callback.complete({
errMsg: '[uQRCode]: value must be set!'
});
return;
}
/* 组件数据 */
this.templateOptions = this.getTemplateOptions();
/* uQRCode选项 */
this.uqrcodeOptions = this.getUqrcodeOptions();
/* 纠错等级兼容字母写法 */
if (typeof this.uqrcodeOptions.errorCorrectLevel === 'string') {
this.uqrcodeOptions.errorCorrectLevel = UQRCode.errorCorrectLevel[this.uqrcodeOptions.errorCorrectLevel];
}
/* nvue不支持动态修改gcanvas尺寸,除nvue外,默认使用useDynamicSize */
// #ifndef APP-NVUE
if (typeof this.options.useDynamicSize === 'undefined') {
this.uqrcodeOptions.useDynamicSize = true;
}
// #endif
// #ifdef APP-NVUE
if (typeof this.options.useDynamicSize === 'undefined') {
this.uqrcodeOptions.useDynamicSize = false;
}
// if (typeof this.options.drawReserve === 'undefined') {
// this.uqrcodeOptions.drawReserve = true;
// }
// #endif
/* 获取uQRCode实例 */
const qr = instance = new UQRCode();
/* 注册扩展 */
this.plugins.forEach(p => qr.register(p.plugin));
/* 设置uQRCode选项 */
qr.setOptions(this.uqrcodeOptions);
/* 调用制作二维码方法 */
qr.make();
/* 获取canvas上下文 */
let canvasContext = null;
// #ifndef APP-NVUE
if (this.canvasType === '2d') {
// #ifdef MP-WEIXIN
/* 微信小程序获取canvas2d上下文方式 */
const canvas = (this.canvas = await new Promise(resolve => {
uni
.createSelectorQuery()
.in(this) // 在组件内使用需要
.select(`#${this.canvasId}`)
.fields({
node: true,
size: true
})
.exec(res => {
resolve(res[0].node);
});
}));
canvasContext = this.canvasContext = canvas.getContext('2d');
/* 2d的组件设置宽高与实际canvas绘制宽高不是一个,打个比方,组件size=200,canvas.width设置为100,那么绘制出来就是100=200,组件size=400,canvas.width设置为800,绘制大小还是800=400,所以无需理会下方返回的dynamicSize是多少,按dpr重新赋值给canvas即可 */
this.templateOptions.canvasWidth = qr.size;
this.templateOptions.canvasHeight = qr.size;
this.templateOptions.canvasTransform = '';
/* 使用dynamicSize+scale,可以解决小块间出现白线问题,dpr可以解决模糊问题 */
const dpr = uni.getSystemInfoSync().pixelRatio;
canvas.width = qr.dynamicSize * dpr;
canvas.height = qr.dynamicSize * dpr;
canvasContext.scale(dpr, dpr);
/* 微信小程序获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
/* 小程序下获取网络图片信息需先配置download域名白名单才能生效 */
return new Promise((resolve, reject) => {
const img = canvas.createImage();
img.src = src;
img.onload = () => {
resolve(img);
};
img.onerror = err => {
reject(err);
};
});
});
// #endif
// #ifndef MP-WEIXIN
/* 非微信小程序不支持2d,切换回uniapp获取canvas上下文方式 */
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId, this);
/* 使用dynamicSize,可以解决小块间出现白线问题,再通过scale缩放至size,使其达到所设尺寸 */
this.templateOptions.canvasWidth = qr.dynamicSize;
this.templateOptions.canvasHeight = qr.dynamicSize;
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
/* uniapp获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
return new Promise((resolve, reject) => {
if (src.startsWith('http')) {
uni.getImageInfo({
src,
success: res => {
resolve(res.path);
},
fail: err => {
reject(err);
}
});
} else {
if (src.startsWith('.')) {
console.error('[uQRCode]: 本地图片路径仅支持绝对路径!');
throw new Error('[uQRCode]: local image path only supports absolute path!');
} else {
resolve(src);
}
}
});
});
// #endif
} else {
/* uniapp获取canvas上下文方式 */
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId, this);
/* 使用dynamicSize,可以解决小块间出现白线问题,再通过scale缩放至size,使其达到所设尺寸 */
this.templateOptions.canvasWidth = qr.dynamicSize;
this.templateOptions.canvasHeight = qr.dynamicSize;
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
this.templateOptions.canvasHeight})`;
/* uniapp获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
return new Promise((resolve, reject) => {
/* getImageInfo在微信小程序的bug:本地路径返回路径会把开头的/或../移除,导致路径错误,解决方法:限制只能使用绝对路径 */
if (src.startsWith('http')) {
uni.getImageInfo({
src,
success: res => {
resolve(res.path);
},
fail: err => {
reject(err);
}
});
} else {
if (src.startsWith('.')) {
console.error('[uQRCode]: 本地图片路径仅支持绝对路径!');
throw new Error('[uQRCode]: local image path only supports absolute path!');
} else {
resolve(src);
}
}
});
});
}
// #endif
// #ifdef APP-NVUE
/* NVue获取canvas上下文方式 */
const gcanvas = this.$refs['gcanvas'];
const canvas = enable(gcanvas, {
bridge: WeexBridge
});
canvasContext = this.canvasContext = canvas.getContext('2d');
/* NVue获取图像方式 */
qr.loadImage = this.getLoadImage(function(src) {
return new Promise((resolve, reject) => {
/* getImageInfo在nvue的bug:获取同一个路径的图片信息,同一时间第一次获取成功,后续失败,猜测是写入本地时产生文件写入冲突,所以没有返回,特别是对于网络资源 --- 已实现队列绘制,已解决此问题 */
if (src.startsWith('.')) {
console.error('[uQRCode]: 本地图片路径仅支持绝对路径!');
throw new Error('[uQRCode]: local image path only supports absolute path!');
} else {
uni.getImageInfo({
src,
success: res => {
resolve(res.path);
},
fail: err => {
reject(err);
}
});
}
});
});
// #endif
/* 设置uQRCode实例的canvas上下文 */
qr.canvasContext = canvasContext;
/* 延时等待页面重新绘制完毕 */
setTimeout(() => {
/* 从插件获取具体要调用哪一个扩展函数 */
var plugin = this.plugins.find(p => p.name == qr.style);
var drawCanvasName = plugin ? plugin.drawCanvas : 'drawCanvas';
/* 虽然qr[drawCanvasName]是直接返回Promise的,但由于js内部this指向问题,故不能直接exec(qr[drawCanvasName])此方式执行,需要改成exec(() => qr[drawCanvasName]())才能正确获取this */
var drawCanvas;
if (this.queue) {
drawCanvas = () => queueDraw.exec(() => qr[drawCanvasName]());
// drawCanvas = () => queueDraw.exec(() => new Promise((resolve, reject) => {
// setTimeout(() => {
// qr[drawCanvasName]().then(resolve).catch(reject);
// }, 1000);
// }));
} else {
drawCanvas = () => qr[drawCanvasName]();
}
/* 调用绘制方法将二维码图案绘制到canvas上 */
drawCanvas()
.then(() => {
if (this.drawDelegate) {
/* 高频重绘纠正 */
let delegate = this.drawDelegate;
this.drawDelegate = undefined;
delegate();
} else {
this.drawing = false;
callback.success();
}
})
.catch(err => {
console.log(err);
if (this.drawDelegate) {
/* 高频重绘纠正 */
let delegate = this.drawDelegate;
this.drawDelegate = undefined;
delegate();
} else {
this.drawing = false;
this.isError = true;
callback.fail(err);
}
})
.finally(() => {
callback.complete();
});
}, 300);
},
/**
* 生成二维码
*/
make(callback = {}) {
this.makeExecuted = true;
this.makeing = true;
this.isError = false;
if (typeof callback.success != 'function') {
callback.success = () => {};
}
if (typeof callback.fail != 'function') {
callback.fail = () => {};
}
if (typeof callback.complete != 'function') {
callback.complete = () => {};
}
this.resetCanvas(() => {
clearTimeout(this.makeDelegate);
this.makeDelegate = setTimeout(() => {
this.draw({
success: () => {
setTimeout(() => {
callback.success();
this.complete(true);
}, 300);
},
fail: err => {
callback.fail(err);
this.error = err;
this.complete(false, err.errMsg);
},
complete: () => {
callback.complete();
this.makeing = false;
}
});
}, 300);
});
},
/**
* 重新生成
*/
remake(callback) {
this.$emit('change');
this.make(callback);
},
/**
* 生成完成
*/
complete(success = true, errMsg = '') {
if (success) {
this.$emit('complete', {
success
});
} else {
this.$emit('complete', {
success,
errMsg
});
}
},
/**
* 导出临时路径
*/
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.makeExecuted) {
console.error('[uQRCode]: make() 方法从未调用!请先成功调用 make() 后再进行操作。');
var err = {
errMsg: '[uQRCode]: make() method has never been executed! please execute make() successfully before operating.'
};
callback.fail(err);
callback.complete(err);
return;
}
if (this.isError) {
callback.fail(this.error);
callback.complete(this.error);
return;
}
if (this.makeing) {
/* 如果还在生成状态,那当前操作将托管到委托,监听生成完成后再通过委托复调当前方法 */
this.toTempFilePathDelegate = () => {
this.toTempFilePath(callback);
};
return;
} else {
this.toTempFilePathDelegate = null;
}
// #ifndef APP-NVUE
if (this.canvasType === '2d') {
// #ifdef MP-WEIXIN
try {
let dataURL = null;
// #ifdef VUE3
dataURL = toRaw(this.canvas)
.toDataURL();
// #endif
// #ifndef VUE3
dataURL = this.canvas.toDataURL();
// #endif
callback.success({
tempFilePath: dataURL
});
callback.complete({
tempFilePath: dataURL
});
} catch (e) {
callback.fail(e);
callback.complete(e);
}
// #endif
} else {
uni.canvasToTempFilePath({
canvasId: this.canvasId,
fileType: this.fileType,
width: Number(this.templateOptions.canvasWidth),
height: Number(this.templateOptions.canvasHeight),
destWidth: Number(this.templateOptions.size),
destHeight: Number(this.templateOptions.size),
success: res => {
callback.success(res);
},
fail: err => {
callback.fail(err);
},
complete: () => {
callback.complete();
}
},
this
);
}
// #endif
// #ifdef APP-NVUE
const dpr = uni.getSystemInfoSync().pixelRatio;
this.canvasContext.toTempFilePath(
0,
0,
this.templateOptions.canvasWidth * dpr,
this.templateOptions.canvasHeight * dpr,
this.templateOptions.size * dpr,
this.templateOptions.size * dpr,
'',
1,
res => {
callback.success(res);
callback.complete(res);
}
);
// #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 => {
// #ifndef H5
if (this.canvasType === '2d') {
// #ifdef MP-WEIXIN
/* 需要将 data:image/png;base64, 这段去除 writeFile 才能正常打开文件,否则是损坏文件,无法打开 */
const reg = new RegExp('^data:image/png;base64,', 'g');
const dataURL = res.tempFilePath.replace(reg, '');
const fs = wx.getFileSystemManager();
const tempFilePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}${
Math.random()
.toString()
.split('.')[1]
}.png`;
fs.writeFile({
filePath: tempFilePath, // 要写入的文件路径 (本地路径)
data: dataURL, // base64图片
encoding: 'base64',
success: res1 => {
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: res2 => {
callback.success(res2);
},
fail: err2 => {
callback.fail(err2);
},
complete: () => {
callback.complete();
}
});
},
fail: err => {
callback.fail(err);
},
complete: () => {
callback.complete();
}
});
// #endif
} else {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res1 => {
callback.success(res1);
},
fail: err1 => {
callback.fail(err1);
},
complete: () => {
callback.complete();
}
});
}
// #endif
// #ifdef H5
/* 可以在电脑浏览器下载,移动端iOS不行,安卓微信浏览器不行,安卓外部浏览器可以 */
this.isH5Save = true;
this.tempFilePath = res.tempFilePath;
if (this.h5SaveIsDownload) {
const aEle = document.createElement('a');
aEle.download = this.h5DownloadName; // 设置下载的文件名,默认是'下载'
aEle.href = res.tempFilePath;
document.body.appendChild(aEle);
aEle.click();
aEle.remove(); // 下载之后把创建的元素删除
}
callback.success({
errMsg: 'ok'
});
callback.complete({
errMsg: 'ok'
});
// #endif
},
fail: err => {
callback.fail(err);
callback.complete(err);
}
});
},
/**
* 注册click事件
*/
onClick(e) {
this.$emit('click', e);
},
/**
* 获取实例
*/
getInstance() {
return instance;
},
/**
* 注册扩展,组件仅支持注册type为style的drawCanvas扩展
* @param {Object} plugin
*/
registerStyle(plugin) {
if (plugin.Type != 'style') {
console.warn('[uQRCode]: registerStyle 仅支持注册 style 类型的扩展!');
return {
errMsg: 'registerStyle 仅支持注册 style 类型的扩展!'
};
}
if (typeof plugin === 'function') {
this.plugins.push({
plugin,
name: plugin.Name,
drawCanvas: plugin.DrawCanvas
});
}
},
getLoadImage(loadImage) {
var that = this;
if (typeof loadImage == 'function') {
return function(src) {
/* 判断是否是队列加载图片的 */
if (that.isQueueLoadImage) {
/* 解决iOS APP||NVUE同时绘制多个二维码导致图片丢失需使用队列 */
return queueLoadImage.exec(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const cache = cacheImageList.find(x => x.src == src);
if (cache) {
resolve(cache.img);
} else {
loadImage(src)
.then(img => {
cacheImageList.push({
src,
img
});
resolve(img);
})
.catch(err => {
reject(err);
});
}
}, 10);
});
});
} else {
return loadImage(src);
}
};
} else {
return function(src) {
return Promise.resolve(src);
};
}
}
}
};
/**
* 对象属性深度替换
* @param {Object} o 原始对象/默认对象/被替换的对象
* @param {Object} r 从这个对象里取值替换到o对象里
* @return {Object} 替换后的新对象
*/
function deepReplace(o = {}, r = {}, c = false) {
let obj;
if (c) {
// 从源替换
obj = o;
} else {
// 不替换源,copy一份备份来替换
obj = {
...o
};
}
for (let k in r) {
var vr = r[k];
if (vr != undefined) {
if (vr.constructor == Object) {
obj[k] = this.deepReplace(obj[k], vr);
} else if (vr.constructor == String && !vr) {
obj[k] = obj[k];
} else {
obj[k] = vr;
}
}
}
return obj;
}
</script>
<style scoped>
.uqrcode {
position: relative;
}
.uqrcode-hide {
position: fixed;
left: 7500rpx;
}
.uqrcode-canvas {
transform-origin: top left;
}
.uqrcode-makeing {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.uqrcode-makeing-image {
/* #ifndef APP-NVUE */
display: block;
max-width: 120px;
max-height: 120px;
/* #endif */
}
.uqrcode-error {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.uqrcode-error-message {
font-size: 12px;
color: #939291;
}
/* #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: 60rpx;
height: 60rpx;
border: 2rpx solid #ffffff;
border-radius: 60rpx;
padding: 10rpx;
}
.uqrcode-h5-save-close-before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 40rpx;
height: 4rpx;
background: #ffffff;
}
.uqrcode-h5-save-close-after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 40rpx;
height: 4rpx;
background: #ffffff;
}
/* #endif */
</style>
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;
\ No newline at end of file
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;
\ No newline at end of file
class FillStylePattern {
constructor(img, pattern) {
this._style = pattern;
this._img = img;
}
}
export default FillStylePattern;
\ No newline at end of file
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;
\ No newline at end of file
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);
}
});
}
}
export default class WebGLActiveInfo {
className = 'WebGLActiveInfo';
constructor({
type, name, size
}) {
this.type = type;
this.name = name;
this.size = size;
}
}
\ No newline at end of file
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);
}
}
\ No newline at end of file
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);
}
}
\ No newline at end of file
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
};
\ No newline at end of file
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;
\ No newline at end of file
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;
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);
}
}
\ No newline at end of file
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);
}
}
\ No newline at end of file
import GLenum from './GLenum';
import ActiveInfo from './ActiveInfo';
import Buffer from './Buffer';
import Framebuffer from './Framebuffer';
import Renderbuffer from './Renderbuffer';
import Texture from './Texture';
import Program from './Program';
import Shader from './Shader';
import ShaderPrecisionFormat from './ShaderPrecisionFormat';
import UniformLocation from './UniformLocation';
import GLmethod from './GLmethod';
const processArray = (array, checkArrayType = false) => {
function joinArray(arr, sep) {
let res = '';
for (let i = 0; i < arr.length; i++) {
if (i !== 0) {
res += sep;
}
res += arr[i];
}
return res;
}
let type = 'Float32Array';
if (checkArrayType) {
if (array instanceof Uint8Array) {
type = 'Uint8Array'
} else if (array instanceof Uint16Array) {
type = 'Uint16Array';
} else if (array instanceof Uint32Array) {
type = 'Uint32Array';
} else if (array instanceof Float32Array) {
type = 'Float32Array';
} else {
throw new Error('Check array type failed. Array type is ' + typeof array);
}
}
const ArrayTypes = {
Uint8Array: 1,
Uint16Array: 2,
Uint32Array: 4,
Float32Array: 14
};
return ArrayTypes[type] + ',' + btoa(joinArray(array, ','))
}
export default class WebGLRenderingContext {
// static GBridge = null;
className = 'WebGLRenderingContext';
constructor(canvas, type, attrs) {
this._canvas = canvas;
this._type = type;
this._version = 'WebGL 1.0';
this._attrs = attrs;
this._map = new Map();
Object.keys(GLenum)
.forEach(name => Object.defineProperty(this, name, {
value: GLenum[name]
}));
}
get canvas() {
return this._canvas;
}
activeTexture = function (textureUnit) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.activeTexture + ',' + textureUnit,
true
);
}
attachShader = function (progarm, shader) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.attachShader + ',' + progarm.id + ',' + shader.id,
true
);
}
bindAttribLocation = function (program, index, name) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.bindAttribLocation + ',' + program.id + ',' + index + ',' + name,
true
)
}
bindBuffer = function (target, buffer) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.bindBuffer + ',' + target + ',' + (buffer ? buffer.id : 0),
true
);
}
bindFramebuffer = function (target, framebuffer) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.bindFramebuffer + ',' + target + ',' + (framebuffer ? framebuffer.id : 0),
true
)
}
bindRenderbuffer = function (target, renderBuffer) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.bindRenderbuffer + ',' + target + ',' + (renderBuffer ? renderBuffer.id : 0),
true
)
}
bindTexture = function (target, texture) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.bindTexture + ',' + target + ',' + (texture ? texture.id : 0),
true
)
}
blendColor = function (r, g, b, a) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.blendColor + ',' + target + ',' + r + ',' + g + ',' + b + ',' + a,
true
)
}
blendEquation = function (mode) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.blendEquation + ',' + mode,
true
)
}
blendEquationSeparate = function (modeRGB, modeAlpha) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.blendEquationSeparate + ',' + modeRGB + ',' + modeAlpha,
true
)
}
blendFunc = function (sfactor, dfactor) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.blendFunc + ',' + sfactor + ',' + dfactor,
true
);
}
blendFuncSeparate = function (srcRGB, dstRGB, srcAlpha, dstAlpha) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.blendFuncSeparate + ',' + srcRGB + ',' + dstRGB + ',' + srcAlpha + ',' + dstAlpha,
true
);
}
bufferData = function (target, data, usage) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.bufferData + ',' + target + ',' + processArray(data, true) + ',' + usage,
true
)
}
bufferSubData = function (target, offset, data) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.bufferSubData + ',' + target + ',' + offset + ',' + processArray(data, true),
true
)
}
checkFramebufferStatus = function (target) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.checkFramebufferStatus + ',' + target
);
return Number(result);
}
clear = function (mask) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.clear + ',' + mask
);
this._canvas._needRender = true;
}
clearColor = function (r, g, b, a) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.clearColor + ',' + r + ',' + g + ',' + b,
true
)
}
clearDepth = function (depth) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.clearDepth + ',' + depth,
true
)
}
clearStencil = function (s) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.clearStencil + ',' + s
);
}
colorMask = function (r, g, b, a) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.colorMask + ',' + r + ',' + g + ',' + b + ',' + a
)
}
compileShader = function (shader) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.compileShader + ',' + shader.id,
true
)
}
compressedTexImage2D = function (target, level, internalformat, width, height, border, pixels) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.compressedTexImage2D + ',' + target + ',' + level + ',' + internalformat + ',' +
width + ',' + height + ',' + border + ',' + processArray(pixels),
true
)
}
compressedTexSubImage2D = function (target, level, xoffset, yoffset, width, height, format, pixels) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.compressedTexSubImage2D + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset + ',' +
width + ',' + height + ',' + format + ',' + processArray(pixels),
true
)
}
copyTexImage2D = function (target, level, internalformat, x, y, width, height, border) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.copyTexImage2D + ',' + target + ',' + level + ',' + internalformat + ',' + x + ',' + y + ',' +
width + ',' + height + ',' + border,
true
);
}
copyTexSubImage2D = function (target, level, xoffset, yoffset, x, y, width, height) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.copyTexSubImage2D + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset + ',' + x + ',' + y + ',' +
width + ',' + height
);
}
createBuffer = function () {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.createBuffer + ''
);
const buffer = new Buffer(result);
this._map.set(buffer.uuid(), buffer);
return buffer;
}
createFramebuffer = function () {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.createFramebuffer + ''
);
const framebuffer = new Framebuffer(result);
this._map.set(framebuffer.uuid(), framebuffer);
return framebuffer;
}
createProgram = function () {
const id = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.createProgram + ''
);
const program = new Program(id);
this._map.set(program.uuid(), program);
return program;
}
createRenderbuffer = function () {
const id = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.createRenderbuffer + ''
)
const renderBuffer = new Renderbuffer(id);
this._map.set(renderBuffer.uuid(), renderBuffer);
return renderBuffer;
}
createShader = function (type) {
const id = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.createShader + ',' + type
)
const shader = new Shader(id, type);
this._map.set(shader.uuid(), shader);
return shader;
}
createTexture = function () {
const id = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.createTexture + ''
);
const texture = new Texture(id);
this._map.set(texture.uuid(), texture);
return texture;
}
cullFace = function (mode) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.cullFace + ',' + mode,
true
)
}
deleteBuffer = function (buffer) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.deleteBuffer + ',' + buffer.id,
true
)
}
deleteFramebuffer = function (framebuffer) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.deleteFramebuffer + ',' + framebuffer.id,
true
)
}
deleteProgram = function (program) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.deleteProgram + ',' + program.id,
true
)
}
deleteRenderbuffer = function (renderbuffer) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.deleteRenderbuffer + ',' + renderbuffer.id,
true
)
}
deleteShader = function (shader) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.deleteShader + ',' + shader.id,
true
)
}
deleteTexture = function (texture) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.deleteTexture + ',' + texture.id,
true
)
}
depthFunc = function (func) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.depthFunc + ',' + func
)
}
depthMask = function (flag) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.depthMask + ',' + Number(flag),
true
)
}
depthRange = function (zNear, zFar) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.depthRange + ',' + zNear + ',' + zFar,
true
)
}
detachShader = function (program, shader) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.detachShader + ',' + program.id + ',' + shader.id,
true
)
}
disable = function (cap) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.disable + ',' + cap,
true
)
}
disableVertexAttribArray = function (index) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.disableVertexAttribArray + ',' + index,
true
);
}
drawArrays = function (mode, first, count) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.drawArrays + ',' + mode + ',' + first + ',' + count
)
this._canvas._needRender = true;
}
drawElements = function (mode, count, type, offset) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.drawElements + ',' + mode + ',' + count + ',' + type + ',' + offset + ';'
);
this._canvas._needRender = true;
}
enable = function (cap) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.enable + ',' + cap,
true
);
}
enableVertexAttribArray = function (index) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.enableVertexAttribArray + ',' + index,
true
)
}
flush = function () {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.flush + ''
)
}
framebufferRenderbuffer = function (target, attachment, textarget, texture, level) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.framebufferRenderbuffer + ',' + target + ',' + attachment + ',' + textarget + ',' + (texture ? texture.id : 0) + ',' + level,
true
)
}
framebufferTexture2D = function (target, attachment, textarget, texture, level) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.framebufferTexture2D + ',' + target + ',' + attachment + ',' + textarget + ',' + (texture ? texture.id : 0) + ',' + level,
true
)
}
frontFace = function (mode) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.frontFace + ',' + mode,
true
)
}
generateMipmap = function (target) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.generateMipmap + ',' + target,
true
)
}
getActiveAttrib = function (progarm, index) {
const resultString = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getActiveAttrib + ',' + progarm.id + ',' + index
)
const [type, size, name] = resultString.split(',');
return new ActiveInfo({
type: Number(type),
size: Number(size),
name
});
}
getActiveUniform = function (progarm, index) {
const resultString = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getActiveUniform + ',' + progarm.id + ',' + index
);
const [type, size, name] = resultString.split(',');
return new ActiveInfo({
type: Number(type),
size: Number(size),
name
})
}
getAttachedShaders = function (progarm) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getAttachedShaders + ',' + progarm.id
);
const [type, ...ids] = result;
return ids.map(id => this._map.get(Shader.uuid(id)));
}
getAttribLocation = function (progarm, name) {
return WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getAttribLocation + ',' + progarm.id + ',' + name
)
}
getBufferParameter = function (target, pname) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getBufferParameter + ',' + target + ',' + pname
);
const [type, res] = getBufferParameter;
return res;
}
getError = function () {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getError + ''
)
return result;
}
getExtension = function (name) {
return null;
}
getFramebufferAttachmentParameter = function (target, attachment, pname) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getFramebufferAttachmentParameter + ',' + target + ',' + attachment + ',' + pname
)
switch (pname) {
case GLenum.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME:
return this._map.get(Renderbuffer.uuid(result)) || this._map.get(Texture.uuid(result)) || null;
default:
return result;
}
}
getParameter = function (pname) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getParameter + ',' + pname
)
switch (pname) {
case GLenum.VERSION:
return this._version;
case GLenum.ARRAY_BUFFER_BINDING: // buffer
case GLenum.ELEMENT_ARRAY_BUFFER_BINDING: // buffer
return this._map.get(Buffer.uuid(result)) || null;
case GLenum.CURRENT_PROGRAM: // program
return this._map.get(Program.uuid(result)) || null;
case GLenum.FRAMEBUFFER_BINDING: // framebuffer
return this._map.get(Framebuffer.uuid(result)) || null;
case GLenum.RENDERBUFFER_BINDING: // renderbuffer
return this._map.get(Renderbuffer.uuid(result)) || null;
case GLenum.TEXTURE_BINDING_2D: // texture
case GLenum.TEXTURE_BINDING_CUBE_MAP: // texture
return this._map.get(Texture.uuid(result)) || null;
case GLenum.ALIASED_LINE_WIDTH_RANGE: // Float32Array
case GLenum.ALIASED_POINT_SIZE_RANGE: // Float32Array
case GLenum.BLEND_COLOR: // Float32Array
case GLenum.COLOR_CLEAR_VALUE: // Float32Array
case GLenum.DEPTH_RANGE: // Float32Array
case GLenum.MAX_VIEWPORT_DIMS: // Int32Array
case GLenum.SCISSOR_BOX: // Int32Array
case GLenum.VIEWPORT: // Int32Array
case GLenum.COMPRESSED_TEXTURE_FORMATS: // Uint32Array
default:
const [type, ...res] = result.split(',');
if (res.length === 1) {
return Number(res[0]);
} else {
return res.map(Number);
}
}
}
getProgramInfoLog = function (progarm) {
return WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getProgramInfoLog + ',' + progarm.id
)
}
getProgramParameter = function (program, pname) {
const res = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getProgramParameter + ',' + program.id + ',' + pname
);
const [type, result] = res.split(',').map(i => parseInt(i));
if (type === 1) {
return Boolean(result);
} else if (type === 2) {
return result;
} else {
throw new Error('Unrecongized program paramater ' + res + ', type: ' + typeof res);
}
}
getRenderbufferParameter = function (target, pname) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getRenderbufferParameter + ',' + target + ',' + pname
)
return result;
}
getShaderInfoLog = function (shader) {
return WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getShaderInfoLog + ',' + shader.id
);
}
getShaderParameter = function (shader, pname) {
return WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getShaderParameter + ',' + shader.id + ',' + pname
)
}
getShaderPrecisionFormat = function (shaderType, precisionType) {
const [rangeMin, rangeMax, precision] = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getShaderPrecisionFormat + ',' + shaderType + ',' + precisionType
);
const shaderPrecisionFormat = new ShaderPrecisionFormat({
rangeMin: Number(rangeMin),
rangeMax: Number(rangeMax),
precision: Number(precision)
});
return shaderPrecisionFormat;
}
getShaderSource = function (shader) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getShaderSource + ',' + shader.id
);
return result;
}
getSupportedExtensions = function () {
return Object.keys({});
}
getTexParameter = function (target, pname) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getTexParameter + ',' + target + ',' + pname
)
return result;
}
getUniformLocation = function (program, name) {
const id = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getUniformLocation + ',' + program.id + ',' + name
);
if (id === -1) {
return null;
} else {
return new UniformLocation(Number(id));
}
}
getVertexAttrib = function (index, pname) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getVertexAttrib + ',' + index + ',' + pname
);
switch (pname) {
case GLenum.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING:
return this._map.get(Buffer.uuid(result)) || null;
case GLenum.CURRENT_VERTEX_ATTRIB: // Float32Array
default:
return result;
}
}
getVertexAttribOffset = function (index, pname) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.getVertexAttribOffset + ',' + index + ',' + pname
)
return Number(result);
}
isBuffer = function (buffer) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.isBuffer + ',' + buffer.id
)
return Boolean(result);
}
isContextLost = function () {
return false;
}
isEnabled = function (cap) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.isEnabled + ',' + cap
)
return Boolean(result);
}
isFramebuffer = function (framebuffer) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.isFramebuffer + ',' + framebuffer.id
)
return Boolean(result);
}
isProgram = function (program) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.isProgram + ',' + program.id
)
return Boolean(result);
}
isRenderbuffer = function (renderBuffer) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.isRenderbuffer + ',' + renderbuffer.id
)
return Boolean(result);
}
isShader = function (shader) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.isShader + ',' + shader.id
)
return Boolean(result);
}
isTexture = function (texture) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.isTexture + ',' + texture.id
);
return Boolean(result);
}
lineWidth = function (width) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.lineWidth + ',' + width,
true
)
}
linkProgram = function (program) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.linkProgram + ',' + program.id,
true
);
}
pixelStorei = function (pname, param) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.pixelStorei + ',' + pname + ',' + Number(param)
)
}
polygonOffset = function (factor, units) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.polygonOffset + ',' + factor + ',' + units
)
}
readPixels = function (x, y, width, height, format, type, pixels) {
const result = WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.readPixels + ',' + x + ',' + y + ',' + width + ',' + height + ',' + format + ',' + type
)
return result;
}
renderbufferStorage = function (target, internalFormat, width, height) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.renderbufferStorage + ',' + target + ',' + internalFormat + ',' + width + ',' + height,
true
)
}
sampleCoverage = function (value, invert) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.sampleCoverage + ',' + value + ',' + Number(invert),
true
)
}
scissor = function (x, y, width, height) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.scissor + ',' + x + ',' + y + ',' + width + ',' + height,
true
)
}
shaderSource = function (shader, source) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.shaderSource + ',' + shader.id + ',' + source
)
}
stencilFunc = function (func, ref, mask) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.stencilFunc + ',' + func + ',' + ref + ',' + mask,
true
)
}
stencilFuncSeparate = function (face, func, ref, mask) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.stencilFuncSeparate + ',' + face + ',' + func + ',' + ref + ',' + mask,
true
)
}
stencilMask = function (mask) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.stencilMask + ',' + mask,
true
)
}
stencilMaskSeparate = function (face, mask) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.stencilMaskSeparate + ',' + face + ',' + mask,
true
)
}
stencilOp = function (fail, zfail, zpass) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.stencilOp + ',' + fail + ',' + zfail + ',' + zpass
)
}
stencilOpSeparate = function (face, fail, zfail, zpass) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.stencilOp + ',' + face + ',' + fail + ',' + zfail + ',' + zpass,
true
)
}
texImage2D = function (...args) {
WebGLRenderingContext.GBridge.texImage2D(this._canvas.id, ...args);
}
texParameterf = function (target, pname, param) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.texParameterf + ',' + target + ',' + pname + ',' + param,
true
)
}
texParameteri = function (target, pname, param) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.texParameteri + ',' + target + ',' + pname + ',' + param
)
}
texSubImage2D = function (...args) {
WebGLRenderingContext.GBridge.texSubImage2D(this._canvas.id, ...args);
}
uniform1f = function (location, v0) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform1f + ',' + location.id + ',' + v0
)
}
uniform1fv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform1fv + ',' + location.id + ',' + processArray(value),
true
)
}
uniform1i = function (location, v0) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform1i + ',' + location.id + ',' + v0,
// true
)
}
uniform1iv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform1iv + ',' + location.id + ',' + processArray(value),
true
)
}
uniform2f = function (location, v0, v1) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform2f + ',' + location.id + ',' + v0 + ',' + v1,
true
)
}
uniform2fv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform2fv + ',' + location.id + ',' + processArray(value),
true
)
}
uniform2i = function (location, v0, v1) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform2i + ',' + location.id + ',' + v0 + ',' + v1,
true
)
}
uniform2iv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform2iv + ',' + location.id + ',' + processArray(value),
true
)
}
uniform3f = function (location, v0, v1, v2) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform3f + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2,
true
)
}
uniform3fv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform3fv + ',' + location.id + ',' + processArray(value),
true
)
}
uniform3i = function (location, v0, v1, v2) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform3i + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2,
true
)
}
uniform3iv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform3iv + ',' + location.id + ',' + processArray(value),
true
)
}
uniform4f = function (location, v0, v1, v2, v3) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform4f + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2 + ',' + v3,
true
)
}
uniform4fv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform4fv + ',' + location.id + ',' + processArray(value),
true
)
}
uniform4i = function (location, v0, v1, v2, v3) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform4i + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2 + ',' + v3,
true
)
}
uniform4iv = function (location, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniform4iv + ',' + location.id + ',' + processArray(value, true),
true
)
}
uniformMatrix2fv = function (location, transpose, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniformMatrix2fv + ',' + location.id + ',' + Number(transpose) + ',' + processArray(value),
true
)
}
uniformMatrix3fv = function (location, transpose, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniformMatrix3fv + ',' + location.id + ',' + Number(transpose) + ',' + processArray(value),
true
)
}
uniformMatrix4fv = function (location, transpose, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.uniformMatrix4fv + ',' + location.id + ',' + Number(transpose) + ',' + processArray(value),
true
);
}
useProgram = function (progarm) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.useProgram + ',' + progarm.id + '',
true
)
}
validateProgram = function (program) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.validateProgram + ',' + program.id,
true
)
}
vertexAttrib1f = function (index, v0) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib1f + ',' + index + ',' + v0,
true
)
}
vertexAttrib2f = function (index, v0, v1) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib2f + ',' + index + ',' + v0 + ',' + v1,
true
)
}
vertexAttrib3f = function (index, v0, v1, v2) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib3f + ',' + index + ',' + v0 + ',' + v1 + ',' + v2,
true
)
}
vertexAttrib4f = function (index, v0, v1, v2, v3) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib4f + ',' + index + ',' + v0 + ',' + v1 + ',' + v2 + ',' + v3,
true
)
}
vertexAttrib1fv = function (index, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib1fv + ',' + index + ',' + processArray(value),
true
)
}
vertexAttrib2fv = function (index, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib2fv + ',' + index + ',' + processArray(value),
true
)
}
vertexAttrib3fv = function (index, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib3fv + ',' + index + ',' + processArray(value),
true
)
}
vertexAttrib4fv = function (index, value) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttrib4fv + ',' + index + ',' + processArray(value),
true
)
}
vertexAttribPointer = function (index, size, type, normalized, stride, offset) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.vertexAttribPointer + ',' + index + ',' + size + ',' + type + ',' + Number(normalized) + ',' + stride + ',' + offset,
true
)
}
viewport = function (x, y, width, height) {
WebGLRenderingContext.GBridge.callNative(
this._canvas.id,
GLmethod.viewport + ',' + x + ',' + y + ',' + width + ',' + height,
true
)
}
}
\ No newline at end of file
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);
}
}
\ No newline at end of file
export default class WebGLShaderPrecisionFormat {
className = 'WebGLShaderPrecisionFormat';
constructor({
rangeMin, rangeMax, precision
}) {
this.rangeMin = rangeMin;
this.rangeMax = rangeMax;
this.precision = precision;
}
}
\ No newline at end of file
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);
}
}
\ No newline at end of file
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);
}
}
\ No newline at end of file
export function getTransferedObjectUUID(name, id) {
return `${name.toLowerCase()}-${id}`;
}
\ No newline at end of file
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);
}
}
\ No newline at end of file
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;
\ No newline at end of file
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;
}
\ No newline at end of file
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;
};
\ No newline at end of file
//---------------------------------------------------------------------
// uQRCode二维码生成插件 v4.0.6
//
// uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js。
//
// Copyright (c) Sansnn uQRCode All rights reserved.
//
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
//
// github地址:
// https://github.com/Sansnn/uQRCode
//
// npm地址:
// https://www.npmjs.com/package/uqrcodejs
//
// uni-app插件市场地址:
// https://ext.dcloud.net.cn/plugin?id=1287
//
// 复制使用请保留本段注释,感谢支持开源!
//
//---------------------------------------------------------------------
//---------------------------------------------------------------------
// 当前文件格式为 es,将 bundle 保留为 ES 模块文件,适用于其他打包工具以及支持 <script type=module> 标签的浏览器(别名: esm,module)
// 如需在其他环境使用,请获取环境对应的格式文件
// 格式说明:
// amd - 异步模块定义,适用于 RequireJS 等模块加载器
// cjs - CommonJS,适用于 Node 环境和其他打包工具(别名:commonjs)
// es - 将 bundle 保留为 ES 模块文件,适用于其他打包工具以及支持 <script type=module> 标签的浏览器(别名: esm,module)
// umd - 通用模块定义,生成的包同时支持 amd、cjs 和 iife 三种格式
//---------------------------------------------------------------------
function o(o){this.mode=r.MODE_8BIT_BYTE,this.data=o;}function e(o,e){this.typeNumber=o,this.errorCorrectLevel=e,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=new Array;}o.prototype={getLength:function(o){return this.data.length},write:function(o){for(var e=0;e<this.data.length;e++)o.put(this.data.charCodeAt(e),8);}},e.prototype={addData:function(e){var r=new o(e);this.dataList.push(r),this.dataCache=null;},isDark:function(o,e){if(o<0||this.moduleCount<=o||e<0||this.moduleCount<=e)throw new Error(o+","+e);return this.modules[o][e]},getModuleCount:function(){return this.moduleCount},make:function(){if(this.typeNumber<1){var o=1;for(o=1;o<40;o++){for(var e=v.getRSBlocks(o,this.errorCorrectLevel),r=new p,t=0,i=0;i<e.length;i++)t+=e[i].dataCount;for(i=0;i<this.dataList.length;i++){var n=this.dataList[i];r.put(n.mode,4),r.put(n.getLength(),h.getLengthInBits(n.mode,o)),n.write(r);}if(r.getLengthInBits()<=8*t)break}this.typeNumber=o;}this.makeImpl(!1,this.getBestMaskPattern());},makeImpl:function(o,r){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var t=0;t<this.moduleCount;t++){this.modules[t]=new Array(this.moduleCount);for(var i=0;i<this.moduleCount;i++)this.modules[t][i]=null;}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(o,r),this.typeNumber>=7&&this.setupTypeNumber(o),null==this.dataCache&&(this.dataCache=e.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,r);},setupPositionProbePattern:function(o,e){for(var r=-1;r<=7;r++)if(!(o+r<=-1||this.moduleCount<=o+r))for(var t=-1;t<=7;t++)e+t<=-1||this.moduleCount<=e+t||(this.modules[o+r][e+t]=0<=r&&r<=6&&(0==t||6==t)||0<=t&&t<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=t&&t<=4);},getBestMaskPattern:function(){for(var o=0,e=0,r=0;r<8;r++){this.makeImpl(!0,r);var t=h.getLostPoint(this);(0==r||o>t)&&(o=t,e=r);}return e},createMovieClip:function(o,e,r){var t=o.createEmptyMovieClip(e,r);this.make();for(var i=0;i<this.modules.length;i++)for(var n=1*i,a=0;a<this.modules[i].length;a++){var d=1*a;this.modules[i][a]&&(t.beginFill(0,100),t.moveTo(d,n),t.lineTo(d+1,n),t.lineTo(d+1,n+1),t.lineTo(d,n+1),t.endFill());}return t},setupTimingPattern:function(){for(var o=8;o<this.moduleCount-8;o++)null==this.modules[o][6]&&(this.modules[o][6]=o%2==0);for(var e=8;e<this.moduleCount-8;e++)null==this.modules[6][e]&&(this.modules[6][e]=e%2==0);},setupPositionAdjustPattern:function(){for(var o=h.getPatternPosition(this.typeNumber),e=0;e<o.length;e++)for(var r=0;r<o.length;r++){var t=o[e],i=o[r];if(null==this.modules[t][i])for(var n=-2;n<=2;n++)for(var a=-2;a<=2;a++)this.modules[t+n][i+a]=-2==n||2==n||-2==a||2==a||0==n&&0==a;}},setupTypeNumber:function(o){for(var e=h.getBCHTypeNumber(this.typeNumber),r=0;r<18;r++){var t=!o&&1==(e>>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=t;}for(r=0;r<18;r++){t=!o&&1==(e>>r&1);this.modules[r%3+this.moduleCount-8-3][Math.floor(r/3)]=t;}},setupTypeInfo:function(o,e){for(var r=this.errorCorrectLevel<<3|e,t=h.getBCHTypeInfo(r),i=0;i<15;i++){var n=!o&&1==(t>>i&1);i<6?this.modules[i][8]=n:i<8?this.modules[i+1][8]=n:this.modules[this.moduleCount-15+i][8]=n;}for(i=0;i<15;i++){n=!o&&1==(t>>i&1);i<8?this.modules[8][this.moduleCount-i-1]=n:i<9?this.modules[8][15-i-1+1]=n:this.modules[8][15-i-1]=n;}this.modules[this.moduleCount-8][8]=!o;},mapData:function(o,e){for(var r=-1,t=this.moduleCount-1,i=7,n=0,a=this.moduleCount-1;a>0;a-=2)for(6==a&&a--;;){for(var d=0;d<2;d++)if(null==this.modules[t][a-d]){var u=!1;n<o.length&&(u=1==(o[n]>>>i&1)),h.getMask(e,t,a-d)&&(u=!u),this.modules[t][a-d]=u,-1==--i&&(n++,i=7);}if((t+=r)<0||this.moduleCount<=t){t-=r,r=-r;break}}}},e.PAD0=236,e.PAD1=17,e.createData=function(o,r,t){for(var i=v.getRSBlocks(o,r),n=new p,a=0;a<t.length;a++){var d=t[a];n.put(d.mode,4),n.put(d.getLength(),h.getLengthInBits(d.mode,o)),d.write(n);}var u=0;for(a=0;a<i.length;a++)u+=i[a].dataCount;if(n.getLengthInBits()>8*u)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*u+")");for(n.getLengthInBits()+4<=8*u&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*u||(n.put(e.PAD0,8),n.getLengthInBits()>=8*u));)n.put(e.PAD1,8);return e.createBytes(n,i)},e.createBytes=function(o,e){for(var r=0,t=0,i=0,n=new Array(e.length),a=new Array(e.length),d=0;d<e.length;d++){var u=e[d].dataCount,s=e[d].totalCount-u;t=Math.max(t,u),i=Math.max(i,s),n[d]=new Array(u);for(var g=0;g<n[d].length;g++)n[d][g]=255&o.buffer[g+r];r+=u;var l=h.getErrorCorrectPolynomial(s),c=new f(n[d],l.getLength()-1).mod(l);a[d]=new Array(l.getLength()-1);for(g=0;g<a[d].length;g++){var m=g+c.getLength()-a[d].length;a[d][g]=m>=0?c.get(m):0;}}var v=0;for(g=0;g<e.length;g++)v+=e[g].totalCount;var p=new Array(v),C=0;for(g=0;g<t;g++)for(d=0;d<e.length;d++)g<n[d].length&&(p[C++]=n[d][g]);for(g=0;g<i;g++)for(d=0;d<e.length;d++)g<a[d].length&&(p[C++]=a[d][g]);return p};for(var r={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},t={L:1,M:0,Q:3,H:2},i=0,n=1,a=2,d=3,u=4,s=5,g=6,l=7,h={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(o){for(var e=o<<10;h.getBCHDigit(e)-h.getBCHDigit(h.G15)>=0;)e^=h.G15<<h.getBCHDigit(e)-h.getBCHDigit(h.G15);return (o<<10|e)^h.G15_MASK},getBCHTypeNumber:function(o){for(var e=o<<12;h.getBCHDigit(e)-h.getBCHDigit(h.G18)>=0;)e^=h.G18<<h.getBCHDigit(e)-h.getBCHDigit(h.G18);return o<<12|e},getBCHDigit:function(o){for(var e=0;0!=o;)e++,o>>>=1;return e},getPatternPosition:function(o){return h.PATTERN_POSITION_TABLE[o-1]},getMask:function(o,e,r){switch(o){case i:return (e+r)%2==0;case n:return e%2==0;case a:return r%3==0;case d:return (e+r)%3==0;case u:return (Math.floor(e/2)+Math.floor(r/3))%2==0;case s:return e*r%2+e*r%3==0;case g:return (e*r%2+e*r%3)%2==0;case l:return (e*r%3+(e+r)%2)%2==0;default:throw new Error("bad maskPattern:"+o)}},getErrorCorrectPolynomial:function(o){for(var e=new f([1],0),r=0;r<o;r++)e=e.multiply(new f([1,c.gexp(r)],0));return e},getLengthInBits:function(o,e){if(1<=e&&e<10)switch(o){case r.MODE_NUMBER:return 10;case r.MODE_ALPHA_NUM:return 9;case r.MODE_8BIT_BYTE:case r.MODE_KANJI:return 8;default:throw new Error("mode:"+o)}else if(e<27)switch(o){case r.MODE_NUMBER:return 12;case r.MODE_ALPHA_NUM:return 11;case r.MODE_8BIT_BYTE:return 16;case r.MODE_KANJI:return 10;default:throw new Error("mode:"+o)}else {if(!(e<41))throw new Error("type:"+e);switch(o){case r.MODE_NUMBER:return 14;case r.MODE_ALPHA_NUM:return 13;case r.MODE_8BIT_BYTE:return 16;case r.MODE_KANJI:return 12;default:throw new Error("mode:"+o)}}},getLostPoint:function(o){for(var e=o.getModuleCount(),r=0,t=0;t<e;t++)for(var i=0;i<e;i++){for(var n=0,a=o.isDark(t,i),d=-1;d<=1;d++)if(!(t+d<0||e<=t+d))for(var u=-1;u<=1;u++)i+u<0||e<=i+u||0==d&&0==u||a==o.isDark(t+d,i+u)&&n++;n>5&&(r+=3+n-5);}for(t=0;t<e-1;t++)for(i=0;i<e-1;i++){var s=0;o.isDark(t,i)&&s++,o.isDark(t+1,i)&&s++,o.isDark(t,i+1)&&s++,o.isDark(t+1,i+1)&&s++,0!=s&&4!=s||(r+=3);}for(t=0;t<e;t++)for(i=0;i<e-6;i++)o.isDark(t,i)&&!o.isDark(t,i+1)&&o.isDark(t,i+2)&&o.isDark(t,i+3)&&o.isDark(t,i+4)&&!o.isDark(t,i+5)&&o.isDark(t,i+6)&&(r+=40);for(i=0;i<e;i++)for(t=0;t<e-6;t++)o.isDark(t,i)&&!o.isDark(t+1,i)&&o.isDark(t+2,i)&&o.isDark(t+3,i)&&o.isDark(t+4,i)&&!o.isDark(t+5,i)&&o.isDark(t+6,i)&&(r+=40);var g=0;for(i=0;i<e;i++)for(t=0;t<e;t++)o.isDark(t,i)&&g++;return r+=10*(Math.abs(100*g/e/e-50)/5)}},c={glog:function(o){if(o<1)throw new Error("glog("+o+")");return c.LOG_TABLE[o]},gexp:function(o){for(;o<0;)o+=255;for(;o>=256;)o-=255;return c.EXP_TABLE[o]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},m=0;m<8;m++)c.EXP_TABLE[m]=1<<m;for(m=8;m<256;m++)c.EXP_TABLE[m]=c.EXP_TABLE[m-4]^c.EXP_TABLE[m-5]^c.EXP_TABLE[m-6]^c.EXP_TABLE[m-8];for(m=0;m<255;m++)c.LOG_TABLE[c.EXP_TABLE[m]]=m;function f(o,e){if(null==o.length)throw new Error(o.length+"/"+e);for(var r=0;r<o.length&&0==o[r];)r++;this.num=new Array(o.length-r+e);for(var t=0;t<o.length-r;t++)this.num[t]=o[t+r];}function v(o,e){this.totalCount=o,this.dataCount=e;}function p(){this.buffer=new Array,this.length=0;}function C(o){return o.setFillStyle=o.setFillStyle||function(e){o.fillStyle=e;},o.setFontSize=o.setFontSize||function(e){o.font=`${e}px`;},o.setTextAlign=o.setTextAlign||function(e){o.textAlign=e;},o.setTextBaseline=o.setTextBaseline||function(e){o.textBaseline=e;},o.setGlobalAlpha=o.setGlobalAlpha||function(e){o.globalAlpha=e;},o.setStrokeStyle=o.setStrokeStyle||function(e){o.strokeStyle=e;},o.setShadow=o.setShadow||function(e,r,t,i){o.shadowOffsetX=e,o.shadowOffsetY=r,o.shadowBlur=t,o.shadowColor=i;},o.draw=o.draw||function(o,e){e&&e();},o.clearRect=o.clearRect||function(e,r,t,i){o.draw(!1);},o}function b(o,e){var r=this.data="",t=this.size=200;this.useDynamicSize=!1,this.dynamicSize=t;var i=this.typeNumber=-1;this.errorCorrectLevel=b.errorCorrectLevel.H;var n=this.margin=0;this.areaColor="#FFFFFF",this.backgroundColor="rgba(255,255,255,0)",this.backgroundImageSrc=void 0;var a=this.backgroundImageWidth=void 0,d=this.backgroundImageHeight=void 0,u=this.backgroundImageX=void 0,s=this.backgroundImageY=void 0;this.backgroundImageAlpha=1,this.backgroundImageBorderRadius=0;var g=this.backgroundPadding=0;this.foregroundColor="#000000",this.foregroundImageSrc=void 0;var l=this.foregroundImageWidth=void 0,h=this.foregroundImageHeight=void 0,c=this.foregroundImageX=void 0,m=this.foregroundImageY=void 0,f=this.foregroundImagePadding=0;this.foregroundImageBackgroundColor="#FFFFFF";var v=this.foregroundImageBorderRadius=0,p=this.foregroundImageShadowOffsetX=0,k=this.foregroundImageShadowOffsetY=0,y=this.foregroundImageShadowBlur=0;this.foregroundImageShadowColor="#808080";var w=this.foregroundPadding=0,I=this.positionProbeBackgroundColor=void 0,B=this.positionProbeForegroundColor=void 0,S=this.separatorColor=void 0,P=this.positionAdjustBackgroundColor=void 0,L=this.positionAdjustForegroundColor=void 0,D=this.timingBackgroundColor=void 0,A=this.timingForegroundColor=void 0,E=this.typeNumberBackgroundColor=void 0,T=this.typeNumberForegroundColor=void 0,N=this.darkBlockColor=void 0;this.base=void 0,this.modules=[],this.moduleCount=0,this.drawModules=[];var M=this.canvasContext=void 0;this.loadImage,this.drawReserve=!1,this.isMaked=!1,Object.defineProperties(this,{data:{get(){if(""===r||void 0===r)throw console.error("[uQRCode]: data must be set!"),new b.Error("data must be set!");return r},set(o){r=String(o);}},size:{get:()=>t,set(o){t=Number(o);}},typeNumber:{get:()=>i,set(o){i=Number(o);}},margin:{get:()=>n,set(o){n=Number(o);}},backgroundImageWidth:{get(){return void 0===a?this.dynamicSize:this.useDynamicSize?this.dynamicSize/this.size*a:a},set(o){a=Number(o);}},backgroundImageHeight:{get(){return void 0===d?this.dynamicSize:this.useDynamicSize?this.dynamicSize/this.size*d:d},set(o){d=Number(o);}},backgroundImageX:{get(){return void 0===u?0:this.useDynamicSize?this.dynamicSize/this.size*u:u},set(o){u=Number(o);}},backgroundImageY:{get(){return void 0===s?0:this.useDynamicSize?this.dynamicSize/this.size*s:s},set(o){s=Number(o);}},backgroundPadding:{get:()=>g,set(o){g=o>1?1:o<0?0:o;}},foregroundImageWidth:{get(){return void 0===l?(this.dynamicSize-2*this.margin)/4:this.useDynamicSize?this.dynamicSize/this.size*l:l},set(o){l=Number(o);}},foregroundImageHeight:{get(){return void 0===h?(this.dynamicSize-2*this.margin)/4:this.useDynamicSize?this.dynamicSize/this.size*h:h},set(o){h=Number(o);}},foregroundImageX:{get(){return void 0===c?this.dynamicSize/2-this.foregroundImageWidth/2:this.useDynamicSize?this.dynamicSize/this.size*c:c},set(o){c=Number(o);}},foregroundImageY:{get(){return void 0===m?this.dynamicSize/2-this.foregroundImageHeight/2:this.useDynamicSize?this.dynamicSize/this.size*m:m},set(o){m=Number(o);}},foregroundImagePadding:{get(){return this.useDynamicSize?this.dynamicSize/this.size*f:f},set(o){f=Number(o);}},foregroundImageBorderRadius:{get(){return this.useDynamicSize?this.dynamicSize/this.size*v:v},set(o){v=Number(o);}},foregroundImageShadowOffsetX:{get(){return this.useDynamicSize?this.dynamicSize/this.size*p:p},set(o){p=Number(o);}},foregroundImageShadowOffsetY:{get(){return this.useDynamicSize?this.dynamicSize/this.size*k:k},set(o){k=Number(o);}},foregroundImageShadowBlur:{get(){return this.useDynamicSize?this.dynamicSize/this.size*y:y},set(o){y=Number(o);}},foregroundPadding:{get:()=>w,set(o){w=o>1?1:o<0?0:o;}},positionProbeBackgroundColor:{get(){return I||this.backgroundColor},set(o){I=o;}},positionProbeForegroundColor:{get(){return B||this.foregroundColor},set(o){B=o;}},separatorColor:{get(){return S||this.backgroundColor},set(o){S=o;}},positionAdjustBackgroundColor:{get(){return P||this.backgroundColor},set(o){P=o;}},positionAdjustForegroundColor:{get(){return L||this.foregroundColor},set(o){L=o;}},timingBackgroundColor:{get(){return D||this.backgroundColor},set(o){D=o;}},timingForegroundColor:{get(){return A||this.foregroundColor},set(o){A=o;}},typeNumberBackgroundColor:{get(){return E||this.backgroundColor},set(o){E=o;}},typeNumberForegroundColor:{get(){return T||this.foregroundColor},set(o){T=o;}},darkBlockColor:{get(){return N||this.foregroundColor},set(o){N=o;}},canvasContext:{get(){if(void 0===M)throw console.error("[uQRCode]: use drawCanvas, you need to set the canvasContext!"),new b.Error("use drawCanvas, you need to set the canvasContext!");return M},set(o){M=C(o);}}}),b.plugins.forEach((o=>o(b,this,!1))),o&&this.setOptions(o),e&&(this.canvasContext=C(e));}f.prototype={get:function(o){return this.num[o]},getLength:function(){return this.num.length},multiply:function(o){for(var e=new Array(this.getLength()+o.getLength()-1),r=0;r<this.getLength();r++)for(var t=0;t<o.getLength();t++)e[r+t]^=c.gexp(c.glog(this.get(r))+c.glog(o.get(t)));return new f(e,0)},mod:function(o){if(this.getLength()-o.getLength()<0)return this;for(var e=c.glog(this.get(0))-c.glog(o.get(0)),r=new Array(this.getLength()),t=0;t<this.getLength();t++)r[t]=this.get(t);for(t=0;t<o.getLength();t++)r[t]^=c.gexp(c.glog(o.get(t))+e);return new f(r,0).mod(o)}},v.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],v.getRSBlocks=function(o,e){var r=v.getRsBlockTable(o,e);if(null==r)throw new Error("bad rs block @ typeNumber:"+o+"/errorCorrectLevel:"+e);for(var t=r.length/3,i=new Array,n=0;n<t;n++)for(var a=r[3*n+0],d=r[3*n+1],u=r[3*n+2],s=0;s<a;s++)i.push(new v(d,u));return i},v.getRsBlockTable=function(o,e){switch(e){case t.L:return v.RS_BLOCK_TABLE[4*(o-1)+0];case t.M:return v.RS_BLOCK_TABLE[4*(o-1)+1];case t.Q:return v.RS_BLOCK_TABLE[4*(o-1)+2];case t.H:return v.RS_BLOCK_TABLE[4*(o-1)+3];default:return}},p.prototype={get:function(o){var e=Math.floor(o/8);return 1==(this.buffer[e]>>>7-o%8&1)},put:function(o,e){for(var r=0;r<e;r++)this.putBit(1==(o>>>e-r-1&1));},getLengthInBits:function(){return this.length},putBit:function(o){var e=Math.floor(this.length/8);this.buffer.length<=e&&this.buffer.push(0),o&&(this.buffer[e]|=128>>>this.length%8),this.length++;}},e.errorCorrectLevel=t,b.errorCorrectLevel=e.errorCorrectLevel,b.Error=function(o){this.errMsg="[uQRCode]: "+o;},b.plugins=[],b.use=function(o){"function"==typeof o&&b.plugins.push(o);},b.prototype.loadImage=function(o){return Promise.resolve(o)},b.prototype.setOptions=function(o){var e,r,t,i,n,a,d,u,s,g,l,h,c,m,f,v,p,C,b,k,y,w,I,B,S,P,L,D,A,E,T,N,M,z,R,_,O,F,x,H,X,Y,j,W,G,K,Q,U,$,J,q,V,Z,oo,eo,ro;o&&(Object.keys(o).forEach((e=>{this[e]=o[e];})),function(o={},e={},r=!1){let t;t=r?o:{...o};for(let o in e){var i=e[o];null!=i&&(i.constructor==Object?t[o]=this.deepReplace(t[o],i):i.constructor!=String||i?t[o]=i:t[o]=t[o]);}}(this,{data:o.data||o.text,size:o.size,useDynamicSize:o.useDynamicSize,typeNumber:o.typeNumber,errorCorrectLevel:o.errorCorrectLevel,margin:o.margin,areaColor:o.areaColor,backgroundColor:o.backgroundColor||(null===(e=o.background)||void 0===e?void 0:e.color),backgroundImageSrc:o.backgroundImageSrc||(null===(r=o.background)||void 0===r||null===(t=r.image)||void 0===t?void 0:t.src),backgroundImageWidth:o.backgroundImageWidth||(null===(i=o.background)||void 0===i||null===(n=i.image)||void 0===n?void 0:n.width),backgroundImageHeight:o.backgroundImageHeight||(null===(a=o.background)||void 0===a||null===(d=a.image)||void 0===d?void 0:d.height),backgroundImageX:o.backgroundImageX||(null===(u=o.background)||void 0===u||null===(s=u.image)||void 0===s?void 0:s.x),backgroundImageY:o.backgroundImageY||(null===(g=o.background)||void 0===g||null===(l=g.image)||void 0===l?void 0:l.y),backgroundImageAlpha:o.backgroundImageAlpha||(null===(h=o.background)||void 0===h||null===(c=h.image)||void 0===c?void 0:c.alpha),backgroundImageBorderRadius:o.backgroundImageBorderRadius||(null===(m=o.background)||void 0===m||null===(f=m.image)||void 0===f?void 0:f.borderRadius),backgroundPadding:o.backgroundPadding,foregroundColor:o.foregroundColor||(null===(v=o.foreground)||void 0===v?void 0:v.color),foregroundImageSrc:o.foregroundImageSrc||(null===(p=o.foreground)||void 0===p||null===(C=p.image)||void 0===C?void 0:C.src),foregroundImageWidth:o.foregroundImageWidth||(null===(b=o.foreground)||void 0===b||null===(k=b.image)||void 0===k?void 0:k.width),foregroundImageHeight:o.foregroundImageHeight||(null===(y=o.foreground)||void 0===y||null===(w=y.image)||void 0===w?void 0:w.height),foregroundImageX:o.foregroundImageX||(null===(I=o.foreground)||void 0===I||null===(B=I.image)||void 0===B?void 0:B.x),foregroundImageY:o.foregroundImageY||(null===(S=o.foreground)||void 0===S||null===(P=S.image)||void 0===P?void 0:P.y),foregroundImagePadding:o.foregroundImagePadding||(null===(L=o.foreground)||void 0===L||null===(D=L.image)||void 0===D?void 0:D.padding),foregroundImageBackgroundColor:o.foregroundImageBackgroundColor||(null===(A=o.foreground)||void 0===A||null===(E=A.image)||void 0===E?void 0:E.backgroundColor),foregroundImageBorderRadius:o.foregroundImageBorderRadius||(null===(T=o.foreground)||void 0===T||null===(N=T.image)||void 0===N?void 0:N.borderRadius),foregroundImageShadowOffsetX:o.foregroundImageShadowOffsetX||(null===(M=o.foreground)||void 0===M||null===(z=M.image)||void 0===z?void 0:z.shadowOffsetX),foregroundImageShadowOffsetY:o.foregroundImageShadowOffsetY||(null===(R=o.foreground)||void 0===R||null===(_=R.image)||void 0===_?void 0:_.shadowOffsetY),foregroundImageShadowBlur:o.foregroundImageShadowBlur||(null===(O=o.foreground)||void 0===O||null===(F=O.image)||void 0===F?void 0:F.shadowBlur),foregroundImageShadowColor:o.foregroundImageShadowColor||(null===(x=o.foreground)||void 0===x||null===(H=x.image)||void 0===H?void 0:H.shadowColor),foregroundPadding:o.foregroundPadding,positionProbeBackgroundColor:o.positionProbeBackgroundColor||(null===(X=o.positionProbe)||void 0===X?void 0:X.backgroundColor)||(null===(Y=o.positionDetection)||void 0===Y?void 0:Y.backgroundColor),positionProbeForegroundColor:o.positionProbeForegroundColor||(null===(j=o.positionProbe)||void 0===j?void 0:j.foregroundColor)||(null===(W=o.positionDetection)||void 0===W?void 0:W.foregroundColor),separatorColor:o.separatorColor||(null===(G=o.separator)||void 0===G?void 0:G.color),positionAdjustBackgroundColor:o.positionAdjustBackgroundColor||(null===(K=o.positionAdjust)||void 0===K?void 0:K.backgroundColor)||(null===(Q=o.alignment)||void 0===Q?void 0:Q.backgroundColor),positionAdjustForegroundColor:o.positionAdjustForegroundColor||(null===(U=o.positionAdjust)||void 0===U?void 0:U.foregroundColor)||(null===($=o.alignment)||void 0===$?void 0:$.foregroundColor),timingBackgroundColor:o.timingBackgroundColor||(null===(J=o.timing)||void 0===J?void 0:J.backgroundColor),timingForegroundColor:o.timingForegroundColor||(null===(q=o.timing)||void 0===q?void 0:q.foregroundColor),typeNumberBackgroundColor:o.typeNumberBackgroundColor||(null===(V=o.typeNumber)||void 0===V?void 0:V.backgroundColor)||(null===(Z=o.versionInformation)||void 0===Z?void 0:Z.backgroundColor),typeNumberForegroundColor:o.typeNumberForegroundColor||(null===(oo=o.typeNumber)||void 0===oo?void 0:oo.foregroundColor)||(null===(eo=o.versionInformation)||void 0===eo?void 0:eo.foregroundColor),darkBlockColor:o.darkBlockColor||(null===(ro=o.darkBlock)||void 0===ro?void 0:ro.color)},!0));},b.prototype.make=function(){let{foregroundColor:o,backgroundColor:r,typeNumber:t,errorCorrectLevel:i,data:n,size:a,margin:d,useDynamicSize:u}=this;if(o===r)throw console.error("[uQRCode]: foregroundColor and backgroundColor cannot be the same!"),new b.Error("foregroundColor and backgroundColor cannot be the same!");var s=new e(t,i);s.addData(function(o){o=o.toString();for(var e,r="",t=0;t<o.length;t++)(e=o.charCodeAt(t))>=1&&e<=127?r+=o.charAt(t):e>2047?(r+=String.fromCharCode(224|e>>12&15),r+=String.fromCharCode(128|e>>6&63),r+=String.fromCharCode(128|e>>0&63)):(r+=String.fromCharCode(192|e>>6&31),r+=String.fromCharCode(128|e>>0&63));return r}(n)),s.make(),this.base=s,this.typeNumber=s.typeNumber,this.modules=s.modules,this.moduleCount=s.moduleCount,this.dynamicSize=u?Math.ceil((a-2*d)/s.moduleCount)*s.moduleCount+2*d:a,function(o){let{dynamicSize:e,margin:r,backgroundColor:t,backgroundPadding:i,foregroundColor:n,foregroundPadding:a,modules:d,moduleCount:u}=o,s=(e-2*r)/u,g=s,l=0;i>0&&(l=g*i/2,g-=2*l);let h=s,c=0;a>0&&(c=h*a/2,h-=2*c);for(var m=0;m<u;m++)for(var f=0;f<u;f++){var v=f*s+r,p=m*s+r;if(d[m][f]){var C=c,b=v+c,k=p+c,y=h,w=h;d[m][f]={type:["foreground"],color:n,isBlack:!0,isDrawn:!1,destX:v,destY:p,destWidth:s,destHeight:s,x:b,y:k,width:y,height:w,paddingTop:C,paddingRight:C,paddingBottom:C,paddingLeft:C};}else C=l,b=v+l,k=p+l,y=g,w=g,d[m][f]={type:["background"],color:t,isBlack:!1,isDrawn:!1,destX:v,destY:p,destWidth:s,destHeight:s,x:b,y:k,width:y,height:w,paddingTop:C,paddingRight:C,paddingBottom:C,paddingLeft:C};}}(this),function(o){let{modules:e,moduleCount:r,positionProbeBackgroundColor:t,positionProbeForegroundColor:i}=o,n=r-7;[[0,0,1],[1,0,1],[2,0,1],[3,0,1],[4,0,1],[5,0,1],[6,0,1],[0,1,1],[1,1,0],[2,1,0],[3,1,0],[4,1,0],[5,1,0],[6,1,1],[0,2,1],[1,2,0],[2,2,1],[3,2,1],[4,2,1],[5,2,0],[6,2,1],[0,3,1],[1,3,0],[2,3,1],[3,3,1],[4,3,1],[5,3,0],[6,3,1],[0,4,1],[1,4,0],[2,4,1],[3,4,1],[4,4,1],[5,4,0],[6,4,1],[0,5,1],[1,5,0],[2,5,0],[3,5,0],[4,5,0],[5,5,0],[6,5,1],[0,6,1],[1,6,1],[2,6,1],[3,6,1],[4,6,1],[5,6,1],[6,6,1]].forEach((o=>{var r=e[o[0]][o[1]],a=e[o[0]+n][o[1]],d=e[o[0]][o[1]+n];d.type.push("positionProbe"),a.type.push("positionProbe"),r.type.push("positionProbe"),r.color=1==o[2]?i:t,a.color=1==o[2]?i:t,d.color=1==o[2]?i:t;}));}(this),function(o){let{modules:e,moduleCount:r,separatorColor:t}=o;[[7,0],[7,1],[7,2],[7,3],[7,4],[7,5],[7,6],[7,7],[0,7],[1,7],[2,7],[3,7],[4,7],[5,7],[6,7]].forEach((o=>{var i=e[o[0]][o[1]],n=e[r-o[0]-1][o[1]],a=e[o[0]][r-o[1]-1];a.type.push("separator"),n.type.push("separator"),i.type.push("separator"),i.color=t,n.color=t,a.color=t;}));}(this),function(o){let{typeNumber:e,modules:r,moduleCount:t,foregroundColor:i,backgroundColor:n,positionAdjustForegroundColor:a,positionAdjustBackgroundColor:d,timingForegroundColor:u,timingBackgroundColor:s}=o;const g=[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]][e-1];if(g){const o=[[-2,-2,1],[-1,-2,1],[0,-2,1],[1,-2,1],[2,-2,1],[-2,-1,1],[-1,-1,0],[0,-1,0],[1,-1,0],[2,-1,1],[-2,0,1],[-1,0,0],[0,0,1],[1,0,0],[2,0,1],[-2,1,1],[-1,1,0],[0,1,0],[1,1,0],[2,1,1],[-2,2,1],[-1,2,1],[0,2,1],[1,2,1],[2,2,1]],e=g.length;for(let l=0;l<e;l++)for(let h=0;h<e;h++){let{x:e,y:c}={x:g[l],y:g[h]};e<9&&c<9||e>t-9-1&&c<9||c>t-9-1&&e<9||o.forEach((o=>{var t=r[e+o[0]][c+o[1]];t.type.push("positionAdjust"),t.type.includes("timing")?1==o[2]?t.color=a==i?u:a:t.color=a==i&&d==n?s:d:t.color=1==o[2]?a:d;}));}}}(this),function(o){let{modules:e,moduleCount:r,timingForegroundColor:t,timingBackgroundColor:i}=o,n=r-16;for(let o=0;o<n;o++){var a=e[6][8+o],d=e[8+o][6];a.type.push("timing"),d.type.push("timing"),a.color=1&o^1?t:i,d.color=1&o^1?t:i;}}(this),function(o){let{modules:e,moduleCount:r,darkBlockColor:t}=o;var i=e[r-7-1][8];i.type.push("darkBlock"),i.color=t;}(this),function(o){let{typeNumber:e,modules:r,moduleCount:t,typeNumberBackgroundColor:i,typeNumberForegroundColor:n}=o;if(e<7)return r;const a=[0,0,0,0,0,0,0,"000111110010010100","001000010110111100","001001101010011001","001010010011010011","001011101111110110","001100011101100010","001101100001000111","001110011000001101","001111100100101000","010000101101111000","010001010001011101","010010101000010111","010011010100110010","010100100110100110","010101011010000011","010110100011001001","010111011111101100","011000111011000100","011001000111100001","011010111110101011","011011000010001110","011100110000011010","011101001100111111","011110110101110101","011111001001010000","100000100111010101","100001011011110000","100010100010111010","100011011110011111","100100101100001011","100101010000101110","100110101001100100","100111010101000001","101000110001101001"];let d=a[e]+a[e],u=[t-11,t-10,t-9];[[5,u[2]],[5,u[1]],[5,u[0]],[4,u[2]],[4,u[1]],[4,u[0]],[3,u[2]],[3,u[1]],[3,u[0]],[2,u[2]],[2,u[1]],[2,u[0]],[1,u[2]],[1,u[1]],[1,u[0]],[0,u[2]],[0,u[1]],[0,u[0]],[u[2],5],[u[1],5],[u[0],5],[u[2],4],[u[1],4],[u[0],4],[u[2],3],[u[1],3],[u[0],3],[u[2],2],[u[1],2],[u[0],2],[u[2],1],[u[1],1],[u[0],1],[u[2],0],[u[1],0],[u[0],0]].forEach(((o,e)=>{var t=r[o[0]][o[1]];t.type.push("typeNumber"),t.color="1"==d[e]?n:i;}));}(this),this.isMaked=!0,this.drawModules=[];},b.prototype.getDrawModules=function(){if(this.drawModules&&this.drawModules.length>0)return this.drawModules;let o=this.drawModules=[],{modules:e,moduleCount:r,dynamicSize:t,areaColor:i,backgroundImageSrc:n,backgroundImageX:a,backgroundImageY:d,backgroundImageWidth:u,backgroundImageHeight:s,backgroundImageAlpha:g,backgroundImageBorderRadius:l,foregroundImageSrc:h,foregroundImageX:c,foregroundImageY:m,foregroundImageWidth:f,foregroundImageHeight:v,foregroundImagePadding:p,foregroundImageBackgroundColor:C,foregroundImageBorderRadius:b,foregroundImageShadowOffsetX:k,foregroundImageShadowOffsetY:y,foregroundImageShadowBlur:w,foregroundImageShadowColor:I}=this;i&&o.push({name:"area",type:"area",color:i,x:0,y:0,width:t,height:t}),n&&o.push({name:"backgroundImage",type:"image",imageSrc:n,mappingName:"backgroundImageSrc",x:a,y:d,width:u,height:s,alpha:g,borderRadius:l});for(var B=0;B<r;B++)for(var S=0;S<r;S++){var P=e[B][S];P.isDrawn||(P.type.includes("foreground")?o.push({name:"foreground",type:"tile",color:P.color,destX:P.destX,destY:P.destY,destWidth:P.destWidth,destHeight:P.destHeight,x:P.x,y:P.y,width:P.width,height:P.height,paddingTop:P.paddingTop,paddingRight:P.paddingRight,paddingBottom:P.paddingBottom,paddingLeft:P.paddingLeft,rowIndex:B,colIndex:S}):o.push({name:"background",type:"tile",color:P.color,destX:P.destX,destY:P.destY,destWidth:P.destWidth,destHeight:P.destHeight,x:P.x,y:P.y,width:P.width,height:P.height,paddingTop:P.paddingTop,paddingRight:P.paddingRight,paddingBottom:P.paddingBottom,paddingLeft:P.paddingLeft,rowIndex:B,colIndex:S}),P.isDrawn=!0);}return h&&o.push({name:"foregroundImage",type:"image",imageSrc:h,mappingName:"foregroundImageSrc",x:c,y:m,width:f,height:v,padding:p,backgroundColor:C,borderRadius:b,shadowOffsetX:k,shadowOffsetY:y,shadowBlur:w,shadowColor:I}),o},b.prototype.isBlack=function(o,e){var r=this.moduleCount;return !(0>o||0>e||o>=r||e>=r)&&this.modules[o][e].isBlack},b.prototype.drawCanvas=function(){let{isMaked:o,canvasContext:e,useDynamicSize:r,dynamicSize:t,foregroundColor:i,foregroundPadding:n,backgroundColor:a,backgroundPadding:d,drawReserve:u,margin:s}=this;if(!o)return console.error("[uQRCode]: please execute the make method first!"),Promise.reject(new b.Error("please execute the make method first!"));let g=this.getDrawModules(),l=async(o,r)=>{try{e.clearRect(0,0,t,t),e.draw(!1);for(var i=0;i<g.length;i++){var n=g[i];switch(e.save(),n.type){case"area":e.setFillStyle(n.color),e.fillRect(n.x,n.y,n.width,n.height);break;case"tile":var a=n.x,d=n.y,s=n.width,l=n.height;e.setFillStyle(n.color),e.fillRect(a,d,s,l);break;case"image":if("backgroundImage"===n.name){a=Math.round(n.x),d=Math.round(n.y),s=Math.round(n.width),l=Math.round(n.height);s<2*(c=Math.round(n.borderRadius))&&(c=s/2),l<2*c&&(c=l/2),e.setGlobalAlpha(n.alpha),c>0&&(e.beginPath(),e.moveTo(a+c,d),e.arcTo(a+s,d,a+s,d+l,c),e.arcTo(a+s,d+l,a,d+l,c),e.arcTo(a,d+l,a,d,c),e.arcTo(a,d,a+s,d,c),e.closePath(),e.setStrokeStyle("rgba(0,0,0,0)"),e.stroke(),e.clip());try{var h=await this.loadImage(n.imageSrc);e.drawImage(h,a,d,s,l);}catch(o){throw console.error(`[uQRCode]: ${n.mappingName} invalid!`),new b.Error(`${n.mappingName} invalid!`)}}else if("foregroundImage"===n.name){a=Math.round(n.x),d=Math.round(n.y),s=Math.round(n.width),l=Math.round(n.height);var c,m=Math.round(n.padding);s<2*(c=Math.round(n.borderRadius))&&(c=s/2),l<2*c&&(c=l/2);var f=a-m,v=d-m,p=s+2*m,C=l+2*m,k=Math.round(p/s*c);p<2*k&&(k=p/2),C<2*k&&(k=C/2),e.save(),e.setShadow(n.shadowOffsetX,n.shadowOffsetY,n.shadowBlur,n.shadowColor),k>0?(e.beginPath(),e.moveTo(f+k,v),e.arcTo(f+p,v,f+p,v+C,k),e.arcTo(f+p,v+C,f,v+C,k),e.arcTo(f,v+C,f,v,k),e.arcTo(f,v,f+p,v,k),e.closePath(),e.setFillStyle(n.backgroundColor),e.fill()):(e.setFillStyle(n.backgroundColor),e.fillRect(f,v,p,C)),e.restore(),e.save(),k>0?(e.beginPath(),e.moveTo(f+k,v),e.arcTo(f+p,v,f+p,v+C,k),e.arcTo(f+p,v+C,f,v+C,k),e.arcTo(f,v+C,f,v,k),e.arcTo(f,v,f+p,v,k),e.closePath(),e.setFillStyle(m>0?n.backgroundColor:"rgba(0,0,0,0)"),e.fill()):(e.setFillStyle(m>0?n.backgroundColor:"rgba(0,0,0,0)"),e.fillRect(f,v,p,C)),e.restore(),c>0&&(e.beginPath(),e.moveTo(a+c,d),e.arcTo(a+s,d,a+s,d+l,c),e.arcTo(a+s,d+l,a,d+l,c),e.arcTo(a,d+l,a,d,c),e.arcTo(a,d,a+s,d,c),e.closePath(),e.setStrokeStyle("rgba(0,0,0,0)"),e.stroke(),e.clip());try{h=await this.loadImage(n.imageSrc);e.drawImage(h,a,d,s,l);}catch(o){throw console.error(`[uQRCode]: ${n.mappingName} invalid!`),new b.Error(`${n.mappingName} invalid!`)}}}u&&e.draw(!0),e.restore();}e.draw(!0),setTimeout(o,150);}catch(o){if(!(o instanceof b.Error))throw o;r(o);}};return new Promise(((o,e)=>{l(o,e);}))},b.prototype.draw=function(){return this.drawCanvas()},b.prototype.register=function(o){o&&o(b,this,!0);};export{b as default};
\ No newline at end of file
{
"id": "Sansnn-uQRCode",
"displayName": "uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端",
"version": "4.0.6",
"description": "uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js。",
"keywords": [
"二维码",
"uQRCode",
"qrcode",
"qr"
],
"repository": "https://github.com/Sansnn/uQRCode",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/uqrcodejs",
"type": "sdk-js"
},
"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": "y"
}
}
}
}
}
## 1.0.3(2022-01-21)
- 优化 组件示例
## 1.0.2(2021-11-22)
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
- 修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
- init
@import './styles/index.scss';
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"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": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"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"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment