@shijiu/jsview-vue-samples 2.1.435 → 2.1.448-test.0
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/DemoHomepage/router.js +5 -0
- package/NinePatchTester/App.vue +182 -0
- package/TextureStoreTest/App.vue +2 -3
- package/package.json +1 -1
package/DemoHomepage/router.js
CHANGED
|
@@ -43,6 +43,11 @@ let routeList = [
|
|
|
43
43
|
path: '/feature/TextureStoreTest',
|
|
44
44
|
component: () => import('jsview-vue-samples/TextureStoreTest/App.vue'),
|
|
45
45
|
},
|
|
46
|
+
{
|
|
47
|
+
name: 'NinePatch对齐测试',
|
|
48
|
+
path: '/feature/NinePatchTester',
|
|
49
|
+
component: () => import('jsview-vue-samples/NinePatchTester/App.vue'),
|
|
50
|
+
},
|
|
46
51
|
{
|
|
47
52
|
name: 'NativeSharedView测试',
|
|
48
53
|
path: '/feature/TestNativeSharedView',
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="bgStyle">
|
|
3
|
+
<div :style="{ top: 50, left: 80 }">
|
|
4
|
+
<div
|
|
5
|
+
:style="{
|
|
6
|
+
top: (sampleImageWidth - innerRadius2) / 2,
|
|
7
|
+
left: (sampleImageWidth - innerRadius2) / 2,
|
|
8
|
+
width: innerRadius2,
|
|
9
|
+
height: innerRadius2,
|
|
10
|
+
fontSize: 10,
|
|
11
|
+
textAlign: 'center',
|
|
12
|
+
lineHeight: innerRadius2,
|
|
13
|
+
backgroundColor: '#FF0000',
|
|
14
|
+
}"
|
|
15
|
+
>
|
|
16
|
+
{{ `圆环内径方形${innerRadius2}x${innerRadius2}` }}
|
|
17
|
+
</div>
|
|
18
|
+
<div
|
|
19
|
+
:style="{
|
|
20
|
+
width: sampleImageWidth,
|
|
21
|
+
height: sampleImageWidth,
|
|
22
|
+
backgroundImage: `jsvtexturestore://${sourceId}`,
|
|
23
|
+
}"
|
|
24
|
+
/>
|
|
25
|
+
<div
|
|
26
|
+
:style="{
|
|
27
|
+
top: sampleImageWidth + 5,
|
|
28
|
+
width: sampleImageWidth,
|
|
29
|
+
height: 12,
|
|
30
|
+
fontSize: 10,
|
|
31
|
+
textAlign: 'center',
|
|
32
|
+
lineHeight: 12,
|
|
33
|
+
}"
|
|
34
|
+
>
|
|
35
|
+
{{ `NinePatch原图尺寸 ${sampleImageWidth}x${sampleImageWidth}` }}
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div :style="{ top: 50, left: 80 + sampleImageWidth + 20 }">
|
|
40
|
+
<div
|
|
41
|
+
:style="{
|
|
42
|
+
width: vTargetRectWidth,
|
|
43
|
+
height: vTargetRectHeight,
|
|
44
|
+
backgroundColor: 'rgb(255,0,0)',
|
|
45
|
+
}"
|
|
46
|
+
/>
|
|
47
|
+
<div
|
|
48
|
+
:style="{
|
|
49
|
+
width: vTargetRectWidth,
|
|
50
|
+
height: vTargetRectHeight,
|
|
51
|
+
backgroundColor: 'rgb(0,100,200)',
|
|
52
|
+
borderRadius: vTargetRectRaidus,
|
|
53
|
+
}"
|
|
54
|
+
/>
|
|
55
|
+
<JsvFlexDiv
|
|
56
|
+
:style="{
|
|
57
|
+
width: vTargetRectWidth,
|
|
58
|
+
height: vTargetRectHeight,
|
|
59
|
+
alignItems: 'center',
|
|
60
|
+
}"
|
|
61
|
+
>
|
|
62
|
+
<div
|
|
63
|
+
:style="{
|
|
64
|
+
width: vTargetRectWidth,
|
|
65
|
+
textAlign: 'center',
|
|
66
|
+
fontSize: 10,
|
|
67
|
+
lineHeight: 12,
|
|
68
|
+
}"
|
|
69
|
+
>
|
|
70
|
+
{{
|
|
71
|
+
`需要外框对齐的带圆角矩形\n\nborderRadius = 圆环内径 / 2\n= ${innerRadius2} / 2`
|
|
72
|
+
}}
|
|
73
|
+
</div>
|
|
74
|
+
</JsvFlexDiv>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div
|
|
78
|
+
:style="{
|
|
79
|
+
top: 50,
|
|
80
|
+
left: 80 + sampleImageWidth + 20 + vTargetRectWidth + 20,
|
|
81
|
+
}"
|
|
82
|
+
>
|
|
83
|
+
<div
|
|
84
|
+
:style="{
|
|
85
|
+
width: vTargetRectWidth,
|
|
86
|
+
height: vTargetRectHeight,
|
|
87
|
+
backgroundColor: 'rgb(0,100,200)',
|
|
88
|
+
}"
|
|
89
|
+
/>
|
|
90
|
+
<div
|
|
91
|
+
:style="{
|
|
92
|
+
width: vTargetRectWidth,
|
|
93
|
+
height: vTargetRectHeight,
|
|
94
|
+
backgroundColor: 'rgb(0,0,255)',
|
|
95
|
+
borderRadius: vTargetRectRaidus,
|
|
96
|
+
}"
|
|
97
|
+
/>
|
|
98
|
+
<JsvNinePatch
|
|
99
|
+
:style="{
|
|
100
|
+
width: vTargetRectWidth,
|
|
101
|
+
height: vTargetRectHeight,
|
|
102
|
+
}"
|
|
103
|
+
:imageUrl="`jsvtexturestore://${sourceId}`"
|
|
104
|
+
:imageWidth="vImageWidth"
|
|
105
|
+
:centerWidth="vCenterWidth"
|
|
106
|
+
:imageDspWidth="vImageDspWidth"
|
|
107
|
+
:borderOutset="vBorderOutset"
|
|
108
|
+
/>
|
|
109
|
+
<JsvFlexDiv
|
|
110
|
+
:style="{
|
|
111
|
+
width: vTargetRectWidth,
|
|
112
|
+
height: vTargetRectHeight,
|
|
113
|
+
alignItems: 'center',
|
|
114
|
+
}"
|
|
115
|
+
>
|
|
116
|
+
<div
|
|
117
|
+
:style="{
|
|
118
|
+
width: vTargetRectWidth,
|
|
119
|
+
textAlign: 'center',
|
|
120
|
+
fontSize: 10,
|
|
121
|
+
lineHeight: 12,
|
|
122
|
+
}"
|
|
123
|
+
>
|
|
124
|
+
{{
|
|
125
|
+
`带圆角矩形 和 NinePatch图形伸缩\n\nborderOutset = (原图高 - 圆环内径) / 2\n= (${sampleImageWidth} - ${innerRadius2}) / 2\n\ncenterWidth = 1`
|
|
126
|
+
}}
|
|
127
|
+
</div>
|
|
128
|
+
</JsvFlexDiv>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</template>
|
|
132
|
+
|
|
133
|
+
<script setup>
|
|
134
|
+
import { shallowRef, onBeforeUnmount } from "vue";
|
|
135
|
+
import { JsvNinePatch, JsvTextureStoreApi, JsvFlexDiv } from "jsview";
|
|
136
|
+
|
|
137
|
+
// 调试参数输入设定
|
|
138
|
+
const innerRadius2 = 110; // 最右边图片的内直径(也是右边图矩形的边长值)
|
|
139
|
+
const circleLineWidth = 10; // 最右边图的边缘粗细
|
|
140
|
+
const sampleImageWidth = 148; // 最右边图形的画布尺寸，画布为正方形
|
|
141
|
+
|
|
142
|
+
const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
|
|
143
|
+
const vTargetRectHeight = 300; // 需要对齐区域的矩形高
|
|
144
|
+
const vTargetRectRaidus = innerRadius2 / 2; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
|
|
145
|
+
|
|
146
|
+
// 计算后的对应NinePatch参数
|
|
147
|
+
let vBorderOutset = (sampleImageWidth - innerRadius2) / 2; // 设置值为图片长度减去内直径除以2
|
|
148
|
+
let vImageWidth = sampleImageWidth; // 原图尺寸设置
|
|
149
|
+
let vImageDspWidth = sampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
|
|
150
|
+
let vCenterWidth = 1; // 圆形的.9图, 中心固定为1
|
|
151
|
+
|
|
152
|
+
// 设置设定模拟绘制.9图
|
|
153
|
+
let canvasRef;
|
|
154
|
+
let sourceId = shallowRef("");
|
|
155
|
+
canvasRef = JsvTextureStoreApi.canvasTexture(
|
|
156
|
+
sampleImageWidth,
|
|
157
|
+
sampleImageWidth
|
|
158
|
+
); // 创建画布
|
|
159
|
+
|
|
160
|
+
let circleRadius =
|
|
161
|
+
Math.floor(innerRadius2 / 2) + Math.floor(circleLineWidth / 2); // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
|
|
162
|
+
let customPath = canvasRef.circlePath(
|
|
163
|
+
Math.floor(sampleImageWidth / 2),
|
|
164
|
+
Math.floor(sampleImageWidth / 2),
|
|
165
|
+
circleRadius
|
|
166
|
+
); // 创建圆环绘制路径，圆形在画布的中心点位置
|
|
167
|
+
canvasRef.drawColor("rgba(200,200,200,0.5)"); // 画布绘制半透明底色
|
|
168
|
+
customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
|
|
169
|
+
sourceId.value = canvasRef.commit(); // texture和div的textureStore绑定
|
|
170
|
+
|
|
171
|
+
onBeforeUnmount(() => {
|
|
172
|
+
JsvTextureStoreApi.deleteTexture(sourceId.value); // 释放texture资源
|
|
173
|
+
});
|
|
174
|
+
</script>
|
|
175
|
+
|
|
176
|
+
<style lang="css" scoped>
|
|
177
|
+
.bgStyle {
|
|
178
|
+
width: 1280;
|
|
179
|
+
height: 720;
|
|
180
|
+
background-color: #819864;
|
|
181
|
+
}
|
|
182
|
+
</style>
|
package/TextureStoreTest/App.vue
CHANGED
|
@@ -123,9 +123,8 @@
|
|
|
123
123
|
</template>
|
|
124
124
|
|
|
125
125
|
<script setup>
|
|
126
|
-
import JsvNinePatch from "@shijiu/jsview-vue/utils/JsViewVueWidget/JsvNinePatch.vue";
|
|
127
126
|
import { shallowRef, onBeforeUnmount } from "vue";
|
|
128
|
-
import { JsvTextureStoreApi } from "jsview";
|
|
127
|
+
import { JsvTextureStoreApi, JsvNinePatch } from "jsview";
|
|
129
128
|
let canvasRef;
|
|
130
129
|
let canvasRef2;
|
|
131
130
|
let canvasRef3;
|
|
@@ -190,7 +189,7 @@ const multiColorSet = {
|
|
|
190
189
|
color: ["#ff0000", "#0000ff", "#00ff00", "#ff00ff"],
|
|
191
190
|
position: [0, 0.3, 0.8, 1],
|
|
192
191
|
};
|
|
193
|
-
|
|
192
|
+
canvasRef4.drawLinearGradientRect(
|
|
194
193
|
0,
|
|
195
194
|
0,
|
|
196
195
|
0,
|