@shijiu/jsview-vue 0.9.254 → 0.9.267
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dom/bin/package.json +11 -11
- package/dom/browser-root-style.css +21 -21
- package/loader/jsview-main.js +41 -41
- package/loader/jsview.config.default.js +37 -37
- package/loader/jsview.default.config.js +37 -37
- package/package.json +1 -5
- package/samples/AdvanceMetroWidget/App.vue +122 -122
- package/samples/AdvanceMetroWidget/Frame.vue +100 -100
- package/samples/AdvanceMetroWidget/Item.vue +57 -57
- package/samples/AdvanceMetroWidget/data.js +136 -136
- package/samples/AnimPicture/App.vue +223 -223
- package/samples/Basic/App.vue +128 -128
- package/samples/Basic/components/TitleBar.vue +28 -28
- package/samples/Basic/components/anim/AnimGroup.vue +67 -67
- package/samples/Basic/components/anim/AnimKeyframeBasic.vue +101 -101
- package/samples/Basic/components/anim/AnimKeyframeComposite.vue +52 -52
- package/samples/Basic/components/anim/AnimTransition.vue +116 -116
- package/samples/Basic/components/div/DivBackground.vue +14 -14
- package/samples/Basic/components/div/DivClip.vue +80 -80
- package/samples/Basic/components/div/DivCssScoped.vue +26 -26
- package/samples/Basic/components/div/DivCssVar.vue +49 -49
- package/samples/Basic/components/div/DivGroup1.vue +32 -32
- package/samples/Basic/components/div/DivGroup2.vue +40 -40
- package/samples/Basic/components/div/DivLayout.vue +11 -11
- package/samples/Basic/components/div/DivRadius.vue +46 -46
- package/samples/Basic/components/text/TextAlign.vue +47 -47
- package/samples/Basic/components/text/TextFontStyle.vue +57 -57
- package/samples/Basic/components/text/TextGroup.vue +31 -31
- package/samples/Basic/components/text/TextOverflow.vue +77 -77
- package/samples/BasicFocusControl/App.vue +124 -124
- package/samples/BasicFocusControl/components/BaseBlock.vue +50 -50
- package/samples/BasicFocusControl/components/MainArea.vue +97 -97
- package/samples/BasicFocusControl/components/MainAreaLeftBlock.vue +20 -20
- package/samples/BasicFocusControl/components/MainAreaRightBlock.vue +29 -29
- package/samples/BasicFocusControl/components/SideBar.vue +72 -72
- package/samples/BasicFocusControl/components/SideBarBlock.vue +29 -29
- package/samples/ClassNameDemo/App.vue +119 -119
- package/samples/ClassNameDemo/components/ContentItem.vue +252 -252
- package/samples/ClassNameDemo/components/LoadingView.vue +43 -43
- package/samples/ClassNameDemo/components/TitleView.vue +24 -24
- package/samples/ClassNameDemo/data.js +24 -24
- package/samples/ColorSpace/App.vue +134 -134
- package/samples/DemoHomepage/App.vue +31 -31
- package/samples/DemoHomepage/components/BodyFrame.vue +81 -81
- package/samples/DemoHomepage/components/Dialog.vue +93 -93
- package/samples/DemoHomepage/components/Item.vue +76 -76
- package/samples/DemoHomepage/components/TabFrame.vue +86 -86
- package/samples/DemoHomepage/router.js +132 -132
- package/samples/DemoHomepage/views/Homepage.vue +186 -186
- package/samples/FlipCard/App.vue +80 -80
- package/samples/FlipCard/FlipCard.vue +123 -123
- package/samples/FlipCard/data.js +12 -12
- package/samples/FlowMultiWidget/App.vue +90 -90
- package/samples/FlowMultiWidget/components/Block.vue +106 -106
- package/samples/FlowMultiWidget/components/FlowPage.vue +59 -59
- package/samples/FlowMultiWidget/components/Item.vue +102 -102
- package/samples/FlowMultiWidget/components/MenuItem.vue +71 -71
- package/samples/FlowMultiWidget/components/MyMenu.vue +89 -89
- package/samples/FlowMultiWidget/data.js +446 -446
- package/samples/HashHistory/App.vue +124 -124
- package/samples/HashHistory/components/HorizontalButtonList.vue +113 -113
- package/samples/HashHistory/components/Item.vue +73 -73
- package/samples/HashHistory/router.js +29 -29
- package/samples/HashHistory/views/BasePage.vue +18 -18
- package/samples/HashHistory/views/MainPage.vue +67 -67
- package/samples/HashHistory/views/SubPage.vue +78 -78
- package/samples/HashHistory/views/SubPageFirst.vue +9 -9
- package/samples/HashHistory/views/SubPageSecond.vue +9 -9
- package/samples/LongImage/App.vue +96 -96
- package/samples/LongImage/Button.vue +153 -153
- package/samples/LongImage/LongImageScroll.vue +126 -126
- package/samples/LongImage/Scroll.vue +15 -15
- package/samples/LongText/App.vue +111 -111
- package/samples/LongText/Button.vue +153 -153
- package/samples/LongText/LongTextScroll.vue +224 -224
- package/samples/LongText/Scroll.vue +15 -15
- package/samples/Preload/App.vue +145 -145
- package/samples/Preload/data.js +22 -22
- package/samples/Preload/preloadItem.vue +21 -21
- package/samples/QrcodeDemo/App.vue +72 -72
- package/samples/SimpleWidgetDemo/App.vue +203 -203
- package/samples/SimpleWidgetDemo/Item.vue +82 -82
- package/samples/SimpleWidgetDemo/components/ContentItem.vue +411 -411
- package/samples/SimpleWidgetDemo/components/MyTab.vue +116 -116
- package/samples/SimpleWidgetDemo/data.js +110 -110
- package/samples/SprayView/App.vue +269 -269
- package/samples/SpriteImage/App.vue +174 -174
- package/samples/SpriteImage/images/egg_break.json +116 -116
- package/samples/TextBox/App.vue +178 -178
- package/samples/TextBox/RenderCenter.vue +108 -108
- package/samples/TextBox/RenderLeft.vue +108 -108
- package/samples/TextBox/RenderOneLine.vue +119 -119
- package/samples/TextBox/RenderRight.vue +106 -106
- package/samples/TextShadowDemo/App.vue +97 -97
- package/samples/TextureSize/App.vue +141 -141
- package/samples/ThrowMoveDemo/AccelerateDemo.vue +117 -117
- package/samples/ThrowMoveDemo/App.vue +113 -113
- package/samples/ThrowMoveDemo/LRParabolicDemo.vue +115 -115
- package/samples/ThrowMoveDemo/TargetDemo.vue +116 -116
- package/samples/ThrowMoveDemo/UDParabolicDemo.vue +121 -121
- package/samples/TransitPage/App.vue +40 -40
- package/samples/VideoDemo/App.vue +137 -137
- package/samples/VideoDemo/components/Button.vue +68 -68
- package/samples/VideoDemo/components/Controllor.vue +195 -195
- package/samples/VideoDemo/components/VideoFrame.vue +152 -152
- package/scripts/common.js +57 -115
- package/scripts/jsview-install-local-packages.js +73 -73
- package/scripts/jsview-post-build.js +127 -127
- package/scripts/jsview-post-install.js +78 -78
- package/scripts/jsview-run-android.js +64 -64
- package/utils/JsViewEngineWidget/bin/index.js +1 -1
- package/utils/JsViewEngineWidget/bin/package.json +11 -11
- package/utils/JsViewVueTools/JsvHashHistory.js +111 -111
- package/utils/JsViewVueTools/JsvRuntimeBridge.js +417 -417
- package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserPreload.vue +80 -80
- package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserQrcode.vue +147 -147
- package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserSpray.vue +54 -54
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/ApicDataBase.js +28 -28
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/BrowserApic.vue +123 -123
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/GifData.js +83 -83
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/LoopToolBase.js +25 -25
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/NormalLoopTool.js +61 -61
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/PartLoopTool.js +119 -119
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/Viewer.js +106 -106
- package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/WebpData.js +141 -141
- package/utils/JsViewVueWidget/BrowserDebugWidget/WidgetLoader.js +20 -20
- package/utils/JsViewVueWidget/JsvActorMove/ActorControlBase.js +204 -204
- package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue +63 -63
- package/utils/JsViewVueWidget/JsvActorMove/JsvActorMoveControl.js +426 -426
- package/utils/JsViewVueWidget/JsvActorMove/index.js +12 -12
- package/utils/JsViewVueWidget/JsvApic/JsvApic.vue +178 -178
- package/utils/JsViewVueWidget/JsvApic/index.js +17 -17
- package/utils/JsViewVueWidget/JsvMarquee.vue +196 -196
- package/utils/JsViewVueWidget/JsvNinePatch.vue +76 -76
- package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue +350 -350
- package/utils/JsViewVueWidget/JsvPreload/index.js +21 -21
- package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue +140 -140
- package/utils/JsViewVueWidget/JsvQrcode/index.js +18 -18
- package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue +139 -139
- package/utils/JsViewVueWidget/JsvSpray/index.js +14 -14
- package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue +447 -447
- package/utils/JsViewVueWidget/JsvSpriteAnim/SpriteController.js +56 -56
- package/utils/JsViewVueWidget/JsvSpriteAnim/index.js +6 -6
- package/utils/JsViewVueWidget/JsvSwiper/Indicator.vue +34 -34
- package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue +494 -494
- package/utils/JsViewVueWidget/JsvSwiper/index.js +9 -9
- package/utils/JsViewVueWidget/JsvSwiper3D/Indicator.vue +34 -34
- package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue +403 -403
- package/utils/JsViewVueWidget/JsvSwiper3D/index.js +9 -9
- package/utils/JsViewVueWidget/JsvTextBox.vue +110 -110
- package/utils/JsViewVueWidget/JsvVideo.vue +35 -35
- package/patches/node_modules/@babel/preset-env/lib/available-plugins.js +0 -219
- package/patches/node_modules/@vue/cli-plugin-typescript/index.js +0 -100
- package/patches/node_modules/@vue/cli-service/lib/commands/serve.js +0 -395
- package/patches/node_modules/@vue/cli-service/lib/config/app.js +0 -272
- package/patches/node_modules/@vue/cli-service/lib/config/assets.js +0 -70
- package/patches/node_modules/@vue/cli-service/lib/config/base.js +0 -212
- package/patches/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js +0 -2566
- package/patches/node_modules/@vue/compiler-sfc/dist/jsview-css-to-js.js +0 -274
- package/patches/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js +0 -1596
- package/patches/node_modules/postcss-js/objectifier.js +0 -90
- package/patches/node_modules/vue-loader/dist/resolveScript.js +0 -70
- package/scripts/deploy-fast-pack.js +0 -17
- package/scripts/deploy-fast-publish.js +0 -44
- package/scripts/deploy-git-commit-empty.js +0 -21
- package/scripts/deploy-prepare.js +0 -56
- package/scripts/make-js.sh +0 -181
- package/vetur.config.js +0 -5
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
props: {
|
|
4
|
-
preloadList: Array,
|
|
5
|
-
downloadList: Array,
|
|
6
|
-
onPreloadDone: Function, // 预加载完成回调
|
|
7
|
-
onDownloadDone: Function, // 预下载完成回调
|
|
8
|
-
},
|
|
9
|
-
data() {
|
|
10
|
-
return {
|
|
11
|
-
preloadStateList: null,
|
|
12
|
-
downloadStateList: null,
|
|
13
|
-
};
|
|
14
|
-
},
|
|
15
|
-
created() {
|
|
16
|
-
if (this.preloadList) {
|
|
17
|
-
this.getPreloadList();
|
|
18
|
-
}
|
|
19
|
-
if (this.downloadList) {
|
|
20
|
-
this.getDownloadList();
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
methods: {
|
|
24
|
-
getPreloadList() {
|
|
25
|
-
this.preloadStateList = new Array(this.preloadList.length).fill(false);
|
|
26
|
-
let preloadListData = this.preloadList;
|
|
27
|
-
for (let i = 0; i < preloadListData.length; i++) {
|
|
28
|
-
if (!preloadListData[i]) {
|
|
29
|
-
preloadListData.splice(i, 1);
|
|
30
|
-
this.preloadIsNullNum++;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
this._PreloadViewList = preloadListData.map((item, index) => {
|
|
34
|
-
if (!item || !item.url) {
|
|
35
|
-
this.preloadStateList[index] = true;
|
|
36
|
-
return null;
|
|
37
|
-
}
|
|
38
|
-
const image = new Image();
|
|
39
|
-
image.onload = () => {
|
|
40
|
-
if (this.onPreloadDone) {
|
|
41
|
-
this.onPreloadDone();
|
|
42
|
-
}
|
|
43
|
-
this.preloadStateList[index] = true;
|
|
44
|
-
};
|
|
45
|
-
image.src = item.url;
|
|
46
|
-
});
|
|
47
|
-
},
|
|
48
|
-
getDownloadList() {
|
|
49
|
-
this.downloadStateList = new Array(this.downloadList.length).fill(false);
|
|
50
|
-
let downloadListData = this.downloadList;
|
|
51
|
-
for (let i = 0; i < downloadListData.length; i++) {
|
|
52
|
-
if (!downloadListData[i].url) {
|
|
53
|
-
downloadListData.splice(i, 1);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
this._DownloadViewList = downloadListData.map((item, index) => {
|
|
57
|
-
if (!item.url) {
|
|
58
|
-
this.downloadStateList[index] = true;
|
|
59
|
-
return null;
|
|
60
|
-
}
|
|
61
|
-
const image = new Image();
|
|
62
|
-
image.onload = () => {
|
|
63
|
-
if (this.onDownloadDone) {
|
|
64
|
-
this.onDownloadDone();
|
|
65
|
-
}
|
|
66
|
-
this.downloadStateList[index] = true;
|
|
67
|
-
console.log(`pre download succeed ${item.url}`);
|
|
68
|
-
};
|
|
69
|
-
image.src = item.url;
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
};
|
|
74
|
-
</script>
|
|
75
|
-
|
|
76
|
-
<template>
|
|
77
|
-
<!-- 保证该组件不描画任何东西,只是为了触发onload,让网页自行下载图片 -->
|
|
78
|
-
<div v-if="!preloadList"></div>
|
|
79
|
-
</template>
|
|
80
|
-
|
|
1
|
+
<script>
|
|
2
|
+
export default {
|
|
3
|
+
props: {
|
|
4
|
+
preloadList: Array,
|
|
5
|
+
downloadList: Array,
|
|
6
|
+
onPreloadDone: Function, // 预加载完成回调
|
|
7
|
+
onDownloadDone: Function, // 预下载完成回调
|
|
8
|
+
},
|
|
9
|
+
data() {
|
|
10
|
+
return {
|
|
11
|
+
preloadStateList: null,
|
|
12
|
+
downloadStateList: null,
|
|
13
|
+
};
|
|
14
|
+
},
|
|
15
|
+
created() {
|
|
16
|
+
if (this.preloadList) {
|
|
17
|
+
this.getPreloadList();
|
|
18
|
+
}
|
|
19
|
+
if (this.downloadList) {
|
|
20
|
+
this.getDownloadList();
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
methods: {
|
|
24
|
+
getPreloadList() {
|
|
25
|
+
this.preloadStateList = new Array(this.preloadList.length).fill(false);
|
|
26
|
+
let preloadListData = this.preloadList;
|
|
27
|
+
for (let i = 0; i < preloadListData.length; i++) {
|
|
28
|
+
if (!preloadListData[i]) {
|
|
29
|
+
preloadListData.splice(i, 1);
|
|
30
|
+
this.preloadIsNullNum++;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
this._PreloadViewList = preloadListData.map((item, index) => {
|
|
34
|
+
if (!item || !item.url) {
|
|
35
|
+
this.preloadStateList[index] = true;
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
38
|
+
const image = new Image();
|
|
39
|
+
image.onload = () => {
|
|
40
|
+
if (this.onPreloadDone) {
|
|
41
|
+
this.onPreloadDone();
|
|
42
|
+
}
|
|
43
|
+
this.preloadStateList[index] = true;
|
|
44
|
+
};
|
|
45
|
+
image.src = item.url;
|
|
46
|
+
});
|
|
47
|
+
},
|
|
48
|
+
getDownloadList() {
|
|
49
|
+
this.downloadStateList = new Array(this.downloadList.length).fill(false);
|
|
50
|
+
let downloadListData = this.downloadList;
|
|
51
|
+
for (let i = 0; i < downloadListData.length; i++) {
|
|
52
|
+
if (!downloadListData[i].url) {
|
|
53
|
+
downloadListData.splice(i, 1);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
this._DownloadViewList = downloadListData.map((item, index) => {
|
|
57
|
+
if (!item.url) {
|
|
58
|
+
this.downloadStateList[index] = true;
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
const image = new Image();
|
|
62
|
+
image.onload = () => {
|
|
63
|
+
if (this.onDownloadDone) {
|
|
64
|
+
this.onDownloadDone();
|
|
65
|
+
}
|
|
66
|
+
this.downloadStateList[index] = true;
|
|
67
|
+
console.log(`pre download succeed ${item.url}`);
|
|
68
|
+
};
|
|
69
|
+
image.src = item.url;
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<template>
|
|
77
|
+
<!-- 保证该组件不描画任何东西,只是为了触发onload,让网页自行下载图片 -->
|
|
78
|
+
<div v-if="!preloadList"></div>
|
|
79
|
+
</template>
|
|
80
|
+
|
|
@@ -1,148 +1,148 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import QRCodeImpl from "qr.js/lib/QRCode";
|
|
3
|
-
export default {
|
|
4
|
-
props: {
|
|
5
|
-
value: String,
|
|
6
|
-
size: Number,
|
|
7
|
-
fgColor: String,
|
|
8
|
-
bgColor: String,
|
|
9
|
-
level: String, // ,容错级别,分别是L(7%)、M(15%)、Q(25%)、H(30%),
|
|
10
|
-
imageSettings: Object
|
|
11
|
-
},
|
|
12
|
-
data() {
|
|
13
|
-
return {
|
|
14
|
-
imageStyle: null,
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
methods: {
|
|
18
|
-
convertStr(str) {
|
|
19
|
-
let out = "";
|
|
20
|
-
for (let i = 0; i < str.length; i++) {
|
|
21
|
-
let charcode = str.charCodeAt(i);
|
|
22
|
-
if (charcode < 0x0080) {
|
|
23
|
-
out += String.fromCharCode(charcode);
|
|
24
|
-
} else if (charcode < 0x0800) {
|
|
25
|
-
out += String.fromCharCode(0xc0 | (charcode >> 6));
|
|
26
|
-
out += String.fromCharCode(0x80 | (charcode & 0x3f));
|
|
27
|
-
} else if (charcode < 0xd800 || charcode >= 0xe000) {
|
|
28
|
-
out += String.fromCharCode(0xe0 | (charcode >> 12));
|
|
29
|
-
out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
|
|
30
|
-
out += String.fromCharCode(0x80 | (charcode & 0x3f));
|
|
31
|
-
} else {
|
|
32
|
-
// This is a surrogate pair, so we'll reconsitute the pieces and work
|
|
33
|
-
// from that
|
|
34
|
-
i++;
|
|
35
|
-
charcode =
|
|
36
|
-
0x10000 + (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff));
|
|
37
|
-
out += String.fromCharCode(0xf0 | (charcode >> 18));
|
|
38
|
-
out += String.fromCharCode(0x80 | ((charcode >> 12) & 0x3f));
|
|
39
|
-
out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
|
|
40
|
-
out += String.fromCharCode(0x80 | (charcode & 0x3f));
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
return out;
|
|
44
|
-
},
|
|
45
|
-
generatePath(modules, margin = 0) {
|
|
46
|
-
const ops = [];
|
|
47
|
-
modules.forEach((row, y) => {
|
|
48
|
-
let start = null;
|
|
49
|
-
row.forEach((cell, x) => {
|
|
50
|
-
if (!cell && start !== null) {
|
|
51
|
-
// M0 0h7v1H0z injects the space with the move and drops the comma,
|
|
52
|
-
// saving a char per operation
|
|
53
|
-
ops.push(
|
|
54
|
-
`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
|
|
55
|
-
);
|
|
56
|
-
start = null;
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// end of row, clean up or skip
|
|
61
|
-
if (x === row.length - 1) {
|
|
62
|
-
if (!cell) {
|
|
63
|
-
// We would have closed the op above already so this can only mean
|
|
64
|
-
// 2+ light modules in a row.
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
if (start === null) {
|
|
68
|
-
// Just a single dark module.
|
|
69
|
-
ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
|
|
70
|
-
} else {
|
|
71
|
-
// Otherwise finish the current line.
|
|
72
|
-
ops.push(
|
|
73
|
-
`M${start + margin},${y + margin} h${x + 1 - start}v1H${
|
|
74
|
-
start + margin
|
|
75
|
-
}z`
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
if (cell && start === null) {
|
|
82
|
-
start = x;
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
});
|
|
86
|
-
return ops.join("");
|
|
87
|
-
},
|
|
88
|
-
getImageSettings(props) {
|
|
89
|
-
// const { imageSettings, size } = props;
|
|
90
|
-
const imageSettings = props.imageSettings;
|
|
91
|
-
const size = props.size;
|
|
92
|
-
if (!imageSettings) {
|
|
93
|
-
return null;
|
|
94
|
-
}
|
|
95
|
-
const w = imageSettings.width;
|
|
96
|
-
const h = imageSettings.height;
|
|
97
|
-
const x = !imageSettings.x ? size / 2 - w / 2 : imageSettings.x;
|
|
98
|
-
const y = !imageSettings.y ? size / 2 - h / 2 : imageSettings.y;
|
|
99
|
-
|
|
100
|
-
return { x, y, h, w };
|
|
101
|
-
},
|
|
102
|
-
renderQrcode() {
|
|
103
|
-
// const { value, size, level, bgColor, fgColor, imageSettings,} = this.props;
|
|
104
|
-
const ErrorCorrectLevel = require("qr.js/lib/ErrorCorrectLevel");
|
|
105
|
-
const qrcode = new QRCodeImpl(-1, ErrorCorrectLevel[this.level]);
|
|
106
|
-
qrcode.addData(this.convertStr(this.value));
|
|
107
|
-
qrcode.make();
|
|
108
|
-
|
|
109
|
-
const cells = qrcode.modules;
|
|
110
|
-
if (cells === null) {
|
|
111
|
-
return null;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
const margin = 2;
|
|
115
|
-
const numCells = cells.length + margin * 2;
|
|
116
|
-
const propsData = {value: this.value, size: this.size, level: this.level, bgColor: this.bgColor, fgColor: this.fgColor, imageSettings: this.imageSettings,}
|
|
117
|
-
const calculatedImageSettings = this.getImageSettings(propsData);
|
|
118
|
-
if (this.imageSettings) {
|
|
119
|
-
this.imageStyle = {
|
|
120
|
-
backgroundImage: `url(${this.imageSettings.src})`,
|
|
121
|
-
height: calculatedImageSettings.h,
|
|
122
|
-
width: calculatedImageSettings.w,
|
|
123
|
-
left: calculatedImageSettings.x + margin,
|
|
124
|
-
top: calculatedImageSettings.y + margin
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
const fgPath = this.generatePath(cells, margin);
|
|
128
|
-
return {numCells, fgPath};
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
}
|
|
132
|
-
</script>
|
|
133
|
-
|
|
134
|
-
<template>
|
|
135
|
-
<div>
|
|
136
|
-
<jsvsvg
|
|
137
|
-
:type="'qrcode'"
|
|
138
|
-
:shapeRendering="'crispEdges'"
|
|
139
|
-
:height="size"
|
|
140
|
-
:width="size"
|
|
141
|
-
:viewBox="'0 0 ' + renderQrcode().numCells + ' ' + renderQrcode().numCells"
|
|
142
|
-
>
|
|
143
|
-
<jsvpath :fill="bgColor" :d="'M0,0 h' + renderQrcode().numCells + 'v' + renderQrcode().numCells + 'H0z'" />
|
|
144
|
-
<jsvpath :fill="fgColor" :d="renderQrcode().fgPath" />
|
|
145
|
-
</jsvsvg>
|
|
146
|
-
<div :style="imageStyle"></div>
|
|
147
|
-
</div>
|
|
1
|
+
<script>
|
|
2
|
+
import QRCodeImpl from "qr.js/lib/QRCode";
|
|
3
|
+
export default {
|
|
4
|
+
props: {
|
|
5
|
+
value: String,
|
|
6
|
+
size: Number,
|
|
7
|
+
fgColor: String,
|
|
8
|
+
bgColor: String,
|
|
9
|
+
level: String, // ,容错级别,分别是L(7%)、M(15%)、Q(25%)、H(30%),
|
|
10
|
+
imageSettings: Object
|
|
11
|
+
},
|
|
12
|
+
data() {
|
|
13
|
+
return {
|
|
14
|
+
imageStyle: null,
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
methods: {
|
|
18
|
+
convertStr(str) {
|
|
19
|
+
let out = "";
|
|
20
|
+
for (let i = 0; i < str.length; i++) {
|
|
21
|
+
let charcode = str.charCodeAt(i);
|
|
22
|
+
if (charcode < 0x0080) {
|
|
23
|
+
out += String.fromCharCode(charcode);
|
|
24
|
+
} else if (charcode < 0x0800) {
|
|
25
|
+
out += String.fromCharCode(0xc0 | (charcode >> 6));
|
|
26
|
+
out += String.fromCharCode(0x80 | (charcode & 0x3f));
|
|
27
|
+
} else if (charcode < 0xd800 || charcode >= 0xe000) {
|
|
28
|
+
out += String.fromCharCode(0xe0 | (charcode >> 12));
|
|
29
|
+
out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
|
|
30
|
+
out += String.fromCharCode(0x80 | (charcode & 0x3f));
|
|
31
|
+
} else {
|
|
32
|
+
// This is a surrogate pair, so we'll reconsitute the pieces and work
|
|
33
|
+
// from that
|
|
34
|
+
i++;
|
|
35
|
+
charcode =
|
|
36
|
+
0x10000 + (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff));
|
|
37
|
+
out += String.fromCharCode(0xf0 | (charcode >> 18));
|
|
38
|
+
out += String.fromCharCode(0x80 | ((charcode >> 12) & 0x3f));
|
|
39
|
+
out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
|
|
40
|
+
out += String.fromCharCode(0x80 | (charcode & 0x3f));
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return out;
|
|
44
|
+
},
|
|
45
|
+
generatePath(modules, margin = 0) {
|
|
46
|
+
const ops = [];
|
|
47
|
+
modules.forEach((row, y) => {
|
|
48
|
+
let start = null;
|
|
49
|
+
row.forEach((cell, x) => {
|
|
50
|
+
if (!cell && start !== null) {
|
|
51
|
+
// M0 0h7v1H0z injects the space with the move and drops the comma,
|
|
52
|
+
// saving a char per operation
|
|
53
|
+
ops.push(
|
|
54
|
+
`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
|
|
55
|
+
);
|
|
56
|
+
start = null;
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// end of row, clean up or skip
|
|
61
|
+
if (x === row.length - 1) {
|
|
62
|
+
if (!cell) {
|
|
63
|
+
// We would have closed the op above already so this can only mean
|
|
64
|
+
// 2+ light modules in a row.
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (start === null) {
|
|
68
|
+
// Just a single dark module.
|
|
69
|
+
ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
|
|
70
|
+
} else {
|
|
71
|
+
// Otherwise finish the current line.
|
|
72
|
+
ops.push(
|
|
73
|
+
`M${start + margin},${y + margin} h${x + 1 - start}v1H${
|
|
74
|
+
start + margin
|
|
75
|
+
}z`
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (cell && start === null) {
|
|
82
|
+
start = x;
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
return ops.join("");
|
|
87
|
+
},
|
|
88
|
+
getImageSettings(props) {
|
|
89
|
+
// const { imageSettings, size } = props;
|
|
90
|
+
const imageSettings = props.imageSettings;
|
|
91
|
+
const size = props.size;
|
|
92
|
+
if (!imageSettings) {
|
|
93
|
+
return null;
|
|
94
|
+
}
|
|
95
|
+
const w = imageSettings.width;
|
|
96
|
+
const h = imageSettings.height;
|
|
97
|
+
const x = !imageSettings.x ? size / 2 - w / 2 : imageSettings.x;
|
|
98
|
+
const y = !imageSettings.y ? size / 2 - h / 2 : imageSettings.y;
|
|
99
|
+
|
|
100
|
+
return { x, y, h, w };
|
|
101
|
+
},
|
|
102
|
+
renderQrcode() {
|
|
103
|
+
// const { value, size, level, bgColor, fgColor, imageSettings,} = this.props;
|
|
104
|
+
const ErrorCorrectLevel = require("qr.js/lib/ErrorCorrectLevel");
|
|
105
|
+
const qrcode = new QRCodeImpl(-1, ErrorCorrectLevel[this.level]);
|
|
106
|
+
qrcode.addData(this.convertStr(this.value));
|
|
107
|
+
qrcode.make();
|
|
108
|
+
|
|
109
|
+
const cells = qrcode.modules;
|
|
110
|
+
if (cells === null) {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
const margin = 2;
|
|
115
|
+
const numCells = cells.length + margin * 2;
|
|
116
|
+
const propsData = {value: this.value, size: this.size, level: this.level, bgColor: this.bgColor, fgColor: this.fgColor, imageSettings: this.imageSettings,}
|
|
117
|
+
const calculatedImageSettings = this.getImageSettings(propsData);
|
|
118
|
+
if (this.imageSettings) {
|
|
119
|
+
this.imageStyle = {
|
|
120
|
+
backgroundImage: `url(${this.imageSettings.src})`,
|
|
121
|
+
height: calculatedImageSettings.h,
|
|
122
|
+
width: calculatedImageSettings.w,
|
|
123
|
+
left: calculatedImageSettings.x + margin,
|
|
124
|
+
top: calculatedImageSettings.y + margin
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
const fgPath = this.generatePath(cells, margin);
|
|
128
|
+
return {numCells, fgPath};
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
}
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<template>
|
|
135
|
+
<div>
|
|
136
|
+
<jsvsvg
|
|
137
|
+
:type="'qrcode'"
|
|
138
|
+
:shapeRendering="'crispEdges'"
|
|
139
|
+
:height="size"
|
|
140
|
+
:width="size"
|
|
141
|
+
:viewBox="'0 0 ' + renderQrcode().numCells + ' ' + renderQrcode().numCells"
|
|
142
|
+
>
|
|
143
|
+
<jsvpath :fill="bgColor" :d="'M0,0 h' + renderQrcode().numCells + 'v' + renderQrcode().numCells + 'H0z'" />
|
|
144
|
+
<jsvpath :fill="fgColor" :d="renderQrcode().fgPath" />
|
|
145
|
+
</jsvsvg>
|
|
146
|
+
<div :style="imageStyle"></div>
|
|
147
|
+
</div>
|
|
148
148
|
</template>
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
* @Author: ChenChanghua
|
|
3
|
-
* @Date: 2021-10-13 11:02:42
|
|
4
|
-
* @LastEditors: ChenChanghua
|
|
5
|
-
* @LastEditTime: 2021-10-13 15:10:01
|
|
6
|
-
* @Description: file content
|
|
7
|
-
-->
|
|
8
|
-
<script>
|
|
9
|
-
import { Forge } from "../../../dom/jsv-forge-define";
|
|
10
|
-
|
|
11
|
-
export default {
|
|
12
|
-
props: {
|
|
13
|
-
pointRes: {
|
|
14
|
-
type: String,
|
|
15
|
-
required: true,
|
|
16
|
-
},
|
|
17
|
-
sprayStyle: {
|
|
18
|
-
type: Object,
|
|
19
|
-
required: true,
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
data() {
|
|
23
|
-
return {
|
|
24
|
-
viewId: -1,
|
|
25
|
-
};
|
|
26
|
-
},
|
|
27
|
-
computed: {
|
|
28
|
-
viewWidth() {
|
|
29
|
-
return this.sprayStyle.deltaWidth === 0 ? 1 : this.sprayStyle.deltaWidth * 2;
|
|
30
|
-
},
|
|
31
|
-
viewHeight() {
|
|
32
|
-
return this.sprayStyle.deltaHeight === 0 ? 1 : this.sprayStyle.deltaHeight * 2;
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
mounted() {
|
|
36
|
-
const viewSize = {
|
|
37
|
-
width: this.viewWidth,
|
|
38
|
-
height: this.viewHeight,
|
|
39
|
-
};
|
|
40
|
-
this.viewId = Forge.sParticleManager.addParticle(
|
|
41
|
-
this.sprayStyle,
|
|
42
|
-
this.pointRes,
|
|
43
|
-
viewSize,
|
|
44
|
-
this.$refs.element
|
|
45
|
-
);
|
|
46
|
-
},
|
|
47
|
-
beforeUnmount() {
|
|
48
|
-
Forge.sParticleManager.recycleView(this.viewId);
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
</script>
|
|
52
|
-
|
|
53
|
-
<template>
|
|
54
|
-
<div ref="element" :style="{ width: viewWidth, height: viewHeight }" />
|
|
1
|
+
<!--
|
|
2
|
+
* @Author: ChenChanghua
|
|
3
|
+
* @Date: 2021-10-13 11:02:42
|
|
4
|
+
* @LastEditors: ChenChanghua
|
|
5
|
+
* @LastEditTime: 2021-10-13 15:10:01
|
|
6
|
+
* @Description: file content
|
|
7
|
+
-->
|
|
8
|
+
<script>
|
|
9
|
+
import { Forge } from "../../../dom/jsv-forge-define";
|
|
10
|
+
|
|
11
|
+
export default {
|
|
12
|
+
props: {
|
|
13
|
+
pointRes: {
|
|
14
|
+
type: String,
|
|
15
|
+
required: true,
|
|
16
|
+
},
|
|
17
|
+
sprayStyle: {
|
|
18
|
+
type: Object,
|
|
19
|
+
required: true,
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
data() {
|
|
23
|
+
return {
|
|
24
|
+
viewId: -1,
|
|
25
|
+
};
|
|
26
|
+
},
|
|
27
|
+
computed: {
|
|
28
|
+
viewWidth() {
|
|
29
|
+
return this.sprayStyle.deltaWidth === 0 ? 1 : this.sprayStyle.deltaWidth * 2;
|
|
30
|
+
},
|
|
31
|
+
viewHeight() {
|
|
32
|
+
return this.sprayStyle.deltaHeight === 0 ? 1 : this.sprayStyle.deltaHeight * 2;
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
mounted() {
|
|
36
|
+
const viewSize = {
|
|
37
|
+
width: this.viewWidth,
|
|
38
|
+
height: this.viewHeight,
|
|
39
|
+
};
|
|
40
|
+
this.viewId = Forge.sParticleManager.addParticle(
|
|
41
|
+
this.sprayStyle,
|
|
42
|
+
this.pointRes,
|
|
43
|
+
viewSize,
|
|
44
|
+
this.$refs.element
|
|
45
|
+
);
|
|
46
|
+
},
|
|
47
|
+
beforeUnmount() {
|
|
48
|
+
Forge.sParticleManager.recycleView(this.viewId);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<template>
|
|
54
|
+
<div ref="element" :style="{ width: viewWidth, height: viewHeight }" />
|
|
55
55
|
</template>
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: ChenChanghua
|
|
3
|
-
* @Date: 2021-10-13 14:00:38
|
|
4
|
-
* @LastEditors: ChenChanghua
|
|
5
|
-
* @LastEditTime: 2021-10-13 14:11:14
|
|
6
|
-
* @Description: file content
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
class ApicDataBase {
|
|
10
|
-
constructor(arrayBuffer) {
|
|
11
|
-
this.LoopCount = 0;
|
|
12
|
-
this.FrameCount = 0;
|
|
13
|
-
this.Width = 0;
|
|
14
|
-
this.Height = 0;
|
|
15
|
-
this._Canvas = window.originDocument.createElement("canvas");
|
|
16
|
-
this._Context = this._Canvas.getContext("2d");
|
|
17
|
-
this._DecodedData = null;
|
|
18
|
-
this.decode(arrayBuffer);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
decode(arrayBuffer) {
|
|
22
|
-
console.log("decode need override ", arrayBuffer);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
toImage(frameIndex, canvas, canvasCtx) {
|
|
26
|
-
console.log("toImage need override ", frameIndex, canvas, canvasCtx);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: ChenChanghua
|
|
3
|
+
* @Date: 2021-10-13 14:00:38
|
|
4
|
+
* @LastEditors: ChenChanghua
|
|
5
|
+
* @LastEditTime: 2021-10-13 14:11:14
|
|
6
|
+
* @Description: file content
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
class ApicDataBase {
|
|
10
|
+
constructor(arrayBuffer) {
|
|
11
|
+
this.LoopCount = 0;
|
|
12
|
+
this.FrameCount = 0;
|
|
13
|
+
this.Width = 0;
|
|
14
|
+
this.Height = 0;
|
|
15
|
+
this._Canvas = window.originDocument.createElement("canvas");
|
|
16
|
+
this._Context = this._Canvas.getContext("2d");
|
|
17
|
+
this._DecodedData = null;
|
|
18
|
+
this.decode(arrayBuffer);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
decode(arrayBuffer) {
|
|
22
|
+
console.log("decode need override ", arrayBuffer);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
toImage(frameIndex, canvas, canvasCtx) {
|
|
26
|
+
console.log("toImage need override ", frameIndex, canvas, canvasCtx);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
29
|
export default ApicDataBase;
|