Skip to content

Commit 48dc994

Browse files
hepengweihepengwei
committed
新增投骰子案例
1 parent e3a979c commit 48dc994

25 files changed

+876
-230
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h1 align="center">visualization-collection-vue</h1>
22
<div align="center">
3-
一个专注于前端视觉效果的集合应用，包含CSS动效、Canvas动画、人工智能应用等上百个案例（Vue版本）
3+
一个专注于前端视觉效果的集合应用，包含CSS动效、Canvas动画、Three.js3D、人工智能应用等上百个案例（Vue版本）
44
</div>
55

66
## 在线体验(PC端)

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" href="public/favicon.ico" />
6-
<meta name="keywords" content="visualization,collection,css3,canvas,前端" />
6+
<meta name="keywords" content="visualization,collection,css3,canvas,threejs,前端" />
77
<meta
88
name="description"
9-
content="一个专注于前端视觉效果的集合应用，包含丰富的CSS3动效、Canvas动画等"
9+
content="一个专注于前端视觉效果的集合应用，包含CSS动效、Canvas动画、Three.js3D、人工智能应用等上百个案例"
1010
/>
1111
<meta name="author" content="River,[email protected]" />
1212
<meta name="copyright" content="River" />

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@vueuse/core": "^10.2.0",
2323
"ant-design-vue": "^4.0.0-rc.5",
2424
"bignumber.js": "^9.1.1",
25+
"cannon-es": "^0.20.0",
2526
"classnames": "^2.3.2",
2627
"date-fns": "^2.30.0",
2728
"echarts": "^5.4.2",

‎src/layout/Menus.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ const items: Ref<ItemType[]> = computed(() => [
116116
getItem(t("menu.threeJs3D.appPageFrame"), "threejsAppPageFrame"),
117117
getItem(t("menu.threeJs3D.carShow"), "carShow"),
118118
getItem(t("menu.threeJs3D.rubiksCube"), "rubiksCube"),
119+
getItem(t("menu.threeJs3D.throwDice"), "throwDice"),
119120
]),
120121
getItem(t("menu.AIApplication"), "AIApplication", () => h(FireOutlined), [
121122
getItem(
@@ -127,7 +128,7 @@ const items: Ref<ItemType[]> = computed(() => [
127128
"notBlockPeopleBarrage"
128129
),
129130
]),
130-
getItem(t("menu.imageProcessingTool"), "gameImage", () =>
131+
getItem(t("menu.imageProcessingTool"), "imageProcessingTool", () =>
131132
h(FileImageOutlined)
132133
),
133134
]);

‎src/locale/en-US.ts

+3
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ const en_US = {
124124
"menu.threeJs3D.appPageFrame": "Cool 3D Application page",
125125
"menu.threeJs3D.carShow": "Car Show",
126126
"menu.threeJs3D.rubiksCube": "Level 3 Rubik's Cube",
127+
"menu.threeJs3D.throwDice": "Throw Dice",
127128
"menu.AIApplication": "AI Application",
128129
"menu.AIApplication.humanPostureDetection": "Human Posture Detection",
129130
"menu.AIApplication.notBlockPeopleBarrage":
@@ -285,6 +286,8 @@ const en_US = {
285286
"page.threeJs3D.hubColor": "Hub Color",
286287
"page.threeJs3D.filmMaterial": "Film Material",
287288
"page.threeJs3D.windshieldMaterial": "Windshield Material",
289+
"page.threeJs3D.diceNum": "Number of dice",
290+
"page.threeJs3D.enterDiceNum": "Please enter the number of dice first",
288291

289292
// 人工智能应用
290293
"page.AIApplication.humanPostureDetection":

‎src/locale/zh-CN.ts

+3
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ const zh_CN = {
113113
"menu.threeJs3D.appPageFrame": "炫酷3D应用页面",
114114
"menu.threeJs3D.carShow": "汽车展览",
115115
"menu.threeJs3D.rubiksCube": "3阶魔方",
116+
"menu.threeJs3D.throwDice": "投骰子",
116117
"menu.AIApplication": "人工智能应用",
117118
"menu.AIApplication.humanPostureDetection": "人体姿态检测",
118119
"menu.AIApplication.notBlockPeopleBarrage": "不挡人像的弹幕",
@@ -247,6 +248,8 @@ const zh_CN = {
247248
"page.threeJs3D.hubColor": "轮毂颜色",
248249
"page.threeJs3D.filmMaterial": "贴膜材质",
249250
"page.threeJs3D.windshieldMaterial": "挡风玻璃材质",
251+
"page.threeJs3D.diceNum": "骰子数量",
252+
"page.threeJs3D.enterDiceNum": "请先输入骰子数量",
250253

251254
// 人工智能应用
252255
"page.AIApplication.humanPostureDetection":

‎src/pages/GameImage/components/AddWatermark.vue renamed to ‎src/pages/ImageProcessingTool/components/AddWatermark.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ watch([imgSizeQualified, watermarkInfo, leftBoxRef], () => {
295295
<div class="top">
296296
<a-button type="primary" class="uploadBtn">
297297
<FolderAddOutlined />
298-
{{ t("page.imageProcessingTool.uploadWatermark") }}
298+
{{ t("common.uploadWatermark") }}
299299
<input type="file" accept="image/jpg, image/jpeg, image/png" :onChange="onUploadWatermarkChange" />
300300
</a-button>
301301
{{ watermarkInfo
@@ -305,7 +305,7 @@ watch([imgSizeQualified, watermarkInfo, leftBoxRef], () => {
305305
<div class="bottom" v-if="!!watermarkInfo">
306306
<a-input-number class="operationBtn" style="width: 160px" :min="0"
307307
:max="imgInfo.value.width - watermarkMinWidthHeight" :precision="0" :value="clipBoxLeft"
308-
:addonBefore="t('page.imageProcessingTool.distanceLeft')" :onChange="(value: number | null) => {
308+
:addonBefore="t('common.distanceLeft')" :onChange="(value: number | null) => {
309309
clipBoxLeft = value || 0;
310310
const { width } = imgInfo.value;
311311
if (value && value + clipBoxWidth > width) {
@@ -314,7 +314,7 @@ watch([imgSizeQualified, watermarkInfo, leftBoxRef], () => {
314314
}" />
315315
<a-input-number class="operationBtn" style="width: 160px" :min="0"
316316
:max="imgInfo.value.height - watermarkMinWidthHeight" :precision="0" :value="clipBoxTop"
317-
:addonBefore="t('page.imageProcessingTool.distanceTop')" :onChange="(value: number | null) => {
317+
:addonBefore="t('common.distanceTop')" :onChange="(value: number | null) => {
318318
clipBoxTop = value || 0;
319319
const { height } = imgInfo.value;
320320
if (value && value + clipBoxHeight > height) {

‎src/pages/GameImage/components/BasicOperation.vue renamed to ‎src/pages/ImageProcessingTool/components/BasicOperation.vue

+150-80
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
/**
2-
* 图片处理工具-基础操作Tab页
3-
*/
1+
/** * 图片处理工具-基础操作Tab页 */
42
<script setup lang="ts">
5-
import { ref, watch } from 'vue';
6-
import { message } from 'ant-design-vue';
7-
import { useI18n } from 'vue-i18n';
3+
import { ref, watch } from "vue";
4+
import { message } from "ant-design-vue";
5+
import { useI18n } from "vue-i18n";
86
import { cloneDeep } from "lodash-es";
97
import {
108
flipSideToSide,
@@ -119,117 +117,189 @@ const doTask = (
119117
}
120118
};
121119
122-
watch(imgInfo, () => {
123-
imgStatusInfo.value = cloneDeep(defaultImgStatus);
124-
}, { immediate: true })
120+
watch(
121+
imgInfo,
122+
() => {
123+
imgStatusInfo.value = cloneDeep(defaultImgStatus);
124+
},
125+
{ immediate: true }
126+
);
125127
</script>
126128

127129
<template>
128-
<FileBox :imgInfo="imgInfo" :imgDragOver="imgDragOver" :onDragOver="onDragOver" :onDragLeave="onDragLeave"
129-
:onDrop="onDrop" />
130+
<FileBox
131+
:imgInfo="imgInfo"
132+
:imgDragOver="imgDragOver"
133+
:onDragOver="onDragOver"
134+
:onDragLeave="onDragLeave"
135+
:onDrop="onDrop"
136+
/>
130137
<div class="operationBtns">
131138
<div class="left">
132-
<a-button type="primary" class="operationBtn" @click="() =>
133-
doTask(imgStatusInfo.flipSideToSideStatus, flipSideToSide)
134-
">
135-
{{ t("page.imageProcessingTool.flipSideToSide") }}
136-
</a-button>
137-
<a-button type="primary" class="operationBtn" @click="() =>
138-
doTask(imgStatusInfo.flipUpsideDownStatus, flipUpsideDown)
139-
">
140-
{{ t("page.imageProcessingTool.flipTopToBottom") }}
141-
</a-button>
142-
<a-button type="primary" class="operationBtn" @click="() =>
143-
doTask(imgStatusInfo.leftRotateStatus, leftRotate)
144-
">
145-
{{ t("page.imageProcessingTool.rotateLeft") }}
146-
</a-button>
147-
<a-button type="primary" class="operationBtn" @click="() =>
148-
doTask(imgStatusInfo.rightRotateStatus, rightRotate)
149-
">
150-
{{ t("page.imageProcessingTool.rotateRight") }}
151-
</a-button>
152-
<a-button type="primary" class="operationBtn" @click="() => doTask(imgStatusInfo.toGreyStatus, toGrey)">
153-
{{ t("page.imageProcessingTool.graying") }}
154-
</a-button>
155-
<a-button type="primary" class="operationBtn" @click="() =>
156-
doTask(
157-
imgStatusInfo.toBlackAndWhiteStatus,
158-
toBlackAndWhite
159-
)
160-
">
161-
{{ t("page.imageProcessingTool.vampix") }}
162-
</a-button>
163-
<a-button type="primary" class="operationBtn" @click="() => doTask(imgStatusInfo.sharpenStatus, sharpen)">
139+
<a-button
140+
type="primary"
141+
class="operationBtn"
142+
@click="
143+
() => doTask(imgStatusInfo.flipSideToSideStatus, flipSideToSide)
144+
"
145+
>
146+
{{ t("common.flipSideToSide") }}
147+
</a-button>
148+
<a-button
149+
type="primary"
150+
class="operationBtn"
151+
@click="
152+
() => doTask(imgStatusInfo.flipUpsideDownStatus, flipUpsideDown)
153+
"
154+
>
155+
{{ t("common.flipTopToBottom") }}
156+
</a-button>
157+
<a-button
158+
type="primary"
159+
class="operationBtn"
160+
@click="() => doTask(imgStatusInfo.leftRotateStatus, leftRotate)"
161+
>
162+
{{ t("common.rotateLeft") }}
163+
</a-button>
164+
<a-button
165+
type="primary"
166+
class="operationBtn"
167+
@click="() => doTask(imgStatusInfo.rightRotateStatus, rightRotate)"
168+
>
169+
{{ t("common.rotateRight") }}
170+
</a-button>
171+
<a-button
172+
type="primary"
173+
class="operationBtn"
174+
@click="() => doTask(imgStatusInfo.toGreyStatus, toGrey)"
175+
>
176+
{{ t("common.graying") }}
177+
</a-button>
178+
<a-button
179+
type="primary"
180+
class="operationBtn"
181+
@click="
182+
() => doTask(imgStatusInfo.toBlackAndWhiteStatus, toBlackAndWhite)
183+
"
184+
>
185+
{{ t("common.vampix") }}
186+
</a-button>
187+
<a-button
188+
type="primary"
189+
class="operationBtn"
190+
@click="() => doTask(imgStatusInfo.sharpenStatus, sharpen)"
191+
>
164192
{{ t("page.imageProcessingTool.shmpch") }}
165193
</a-button>
166-
<a-button type="primary" class="operationBtn" @click="() =>
167-
doTask(imgStatusInfo.marginSharpenStatus, marginSharpen)
168-
">
194+
<a-button
195+
type="primary"
196+
class="operationBtn"
197+
@click="() => doTask(imgStatusInfo.marginSharpenStatus, marginSharpen)"
198+
>
169199
{{ t("page.imageProcessingTool.edgeSharpening") }}
170200
</a-button>
171-
<a-button type="primary" class="operationBtn" @click="() =>
172-
doTask(imgStatusInfo.toOppositeStatus, toOpposite)
173-
">
201+
<a-button
202+
type="primary"
203+
class="operationBtn"
204+
@click="() => doTask(imgStatusInfo.toOppositeStatus, toOpposite)"
205+
>
174206
{{ t("page.imageProcessingTool.filterContrast") }}
175207
</a-button>
176-
<a-button type="primary" class="operationBtn" @click="() => doTask(imgStatusInfo.toRedStatus, toRed)">
208+
<a-button
209+
type="primary"
210+
class="operationBtn"
211+
@click="() => doTask(imgStatusInfo.toRedStatus, toRed)"
212+
>
177213
{{ t("page.imageProcessingTool.redFilter") }}
178214
</a-button>
179-
<a-button type="primary" class="operationBtn" @click="() => doTask(imgStatusInfo.toGreenStatus, toGreen)">
215+
<a-button
216+
type="primary"
217+
class="operationBtn"
218+
@click="() => doTask(imgStatusInfo.toGreenStatus, toGreen)"
219+
>
180220
{{ t("page.imageProcessingTool.greenFilter") }}
181221
</a-button>
182-
<a-button type="primary" class="operationBtn" @click="() => doTask(imgStatusInfo.toBlueStatus, toBlue)">
222+
<a-button
223+
type="primary"
224+
class="operationBtn"
225+
@click="() => doTask(imgStatusInfo.toBlueStatus, toBlue)"
226+
>
183227
{{ t("page.imageProcessingTool.blueFilter") }}
184228
</a-button>
185-
<a-button type="primary" class="operationBtn" @click="() =>
186-
doTask(imgStatusInfo.toRedAndGreenStatus, toRedAndGreen)
187-
">
229+
<a-button
230+
type="primary"
231+
class="operationBtn"
232+
@click="() => doTask(imgStatusInfo.toRedAndGreenStatus, toRedAndGreen)"
233+
>
188234
{{ t("page.imageProcessingTool.redGreenFilter") }}
189235
</a-button>
190-
<a-button type="primary" class="operationBtn" @click="() =>
191-
doTask(imgStatusInfo.toRedAndBlueStatus, toRedAndBlue)
192-
">
236+
<a-button
237+
type="primary"
238+
class="operationBtn"
239+
@click="() => doTask(imgStatusInfo.toRedAndBlueStatus, toRedAndBlue)"
240+
>
193241
{{ t("page.imageProcessingTool.redBlueFilter") }}
194242
</a-button>
195-
<a-button type="primary" class="operationBtn" @click="() =>
196-
doTask(imgStatusInfo.toBlueAndGreenStatus, toBlueAndGreen)
197-
">
243+
<a-button
244+
type="primary"
245+
class="operationBtn"
246+
@click="
247+
() => doTask(imgStatusInfo.toBlueAndGreenStatus, toBlueAndGreen)
248+
"
249+
>
198250
{{ t("page.imageProcessingTool.blueGreenFilter") }}
199251
</a-button>
200-
<a-button type="primary" class="operationBtn" @click="() =>
201-
doTask(imgStatusInfo.toRedAndGreyStatus, toRedAndGrey)
202-
">
252+
<a-button
253+
type="primary"
254+
class="operationBtn"
255+
@click="() => doTask(imgStatusInfo.toRedAndGreyStatus, toRedAndGrey)"
256+
>
203257
{{ t("page.imageProcessingTool.redGreyFilter") }}
204258
</a-button>
205-
<a-button type="primary" class="operationBtn" @click="() =>
206-
doTask(imgStatusInfo.toGreenAndGreyStatus, toGreenAndGrey)
207-
">
259+
<a-button
260+
type="primary"
261+
class="operationBtn"
262+
@click="
263+
() => doTask(imgStatusInfo.toGreenAndGreyStatus, toGreenAndGrey)
264+
"
265+
>
208266
{{ t("page.imageProcessingTool.greenGreyFilter") }}
209267
</a-button>
210-
<a-button type="primary" class="operationBtn" @click="() =>
211-
doTask(imgStatusInfo.toBlueAndGreyStatus, toBlueAndGrey)
212-
">
268+
<a-button
269+
type="primary"
270+
class="operationBtn"
271+
@click="() => doTask(imgStatusInfo.toBlueAndGreyStatus, toBlueAndGrey)"
272+
>
213273
{{ t("page.imageProcessingTool.blueGreyFilter") }}
214274
</a-button>
215-
<a-button type="primary" class="operationBtn" @click="() =>
216-
doTask(imgStatusInfo.toGaussianBlurStatus, toGaussianBlur)
217-
">
275+
<a-button
276+
type="primary"
277+
class="operationBtn"
278+
@click="
279+
() => doTask(imgStatusInfo.toGaussianBlurStatus, toGaussianBlur)
280+
"
281+
>
218282
{{ t("page.imageProcessingTool.gaussianBlur") }}
219283
</a-button>
220-
<a-button type="primary" class="operationBtn" @click="() =>
221-
doTask(imgStatusInfo.jpgToPngStatus, jpgToPng, 'PNG')" v-if="['JPG',
222-
'JPEG'].includes(imgInfo.fileType)">
284+
<a-button
285+
type="primary"
286+
class="operationBtn"
287+
@click="() => doTask(imgStatusInfo.jpgToPngStatus, jpgToPng, 'PNG')"
288+
v-if="['JPG', 'JPEG'].includes(imgInfo.fileType)"
289+
>
223290
{{ t("page.imageProcessingTool.jpgToPng") }}
224291
</a-button>
225-
<a-button type="primary" class="operationBtn" @click="() =>
226-
doTask(imgStatusInfo.pngToJpgStatus, pngToJpg, 'JPEG')" v-if="imgInfo.fileType
227-
=== 'PNG'">
292+
<a-button
293+
type="primary"
294+
class="operationBtn"
295+
@click="() => doTask(imgStatusInfo.pngToJpgStatus, pngToJpg, 'JPEG')"
296+
v-if="imgInfo.fileType === 'PNG'"
297+
>
228298
{{ t("page.imageProcessingTool.pngToJpg") }}
229299
</a-button>
230300
</div>
231301
<a-button class="right" ghost type="primary" @click="onClear">
232302
{{ t("common.clear") }}
233303
</a-button>
234304
</div>
235-
</template>
305+
</template>

‎src/pages/GameImage/components/ChangeBrightness.vue renamed to ‎src/pages/ImageProcessingTool/components/ChangeBrightness.vue

File renamed without changes.

‎src/pages/GameImage/components/ChangeDiaphaneity.vue renamed to ‎src/pages/ImageProcessingTool/components/ChangeDiaphaneity.vue

File renamed without changes.

0 commit comments

Comments
 (0)