feat: remake machanicalbutton
This commit is contained in:
alivender
parent
5ea541ef4b
commit
4465091db3
|
|
@ -1,37 +1,52 @@
|
||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 1600 1600">
|
<div class="relative" :style="{width: `${props.width}px`, height: `${props.height}px`}">
|
||||||
<def>
|
<!-- 简化的SVG按钮 -->
|
||||||
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
|
<svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 1600 1600">
|
||||||
<feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur" />
|
<defs>
|
||||||
<feColorMatrix result="bluralpha" type="matrix" :values="colorMatrix" />
|
<filter id="btn-shadow">
|
||||||
<feOffset in="bluralpha" dx="20" dy="20" result="offsetBlur" />
|
<feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur" />
|
||||||
<feMerge>
|
<feColorMatrix result="bluralpha" type="matrix" :values="colorMatrix" />
|
||||||
<feMergeNode in="offsetBlur" />
|
<feOffset in="bluralpha" dx="20" dy="20" result="offsetBlur" />
|
||||||
<feMergeNode in="SourceGraphic" />
|
<feMerge>
|
||||||
</feMerge>
|
<feMergeNode in="offsetBlur" />
|
||||||
</filter>
|
<feMergeNode in="SourceGraphic" />
|
||||||
</def>
|
</feMerge>
|
||||||
<g>
|
</filter>
|
||||||
|
<linearGradient id="normal" gradientTransform="rotate(45 0 0)">
|
||||||
|
<stop stop-color="#4b4b4b" offset="0" />
|
||||||
|
<stop stop-color="#171717" offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="pressed" gradientTransform="rotate(45 0 0)">
|
||||||
|
<stop stop-color="#171717" offset="0" />
|
||||||
|
<stop stop-color="#4b4b4b" offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 按钮底座 -->
|
||||||
<rect width="800" height="800" x="400" y="400" fill="#464646" rx="20" />
|
<rect width="800" height="800" x="400" y="400" fill="#464646" rx="20" />
|
||||||
<rect width="700" height="700" x="450" y="450" fill="#eaeaea" rx="20" />
|
<rect width="700" height="700" x="450" y="450" fill="#eaeaea" rx="20" />
|
||||||
|
|
||||||
|
<!-- 装饰螺丝 -->
|
||||||
<circle r="20" cx="1075" cy="1075" fill="#171717" />
|
<circle r="20" cx="1075" cy="1075" fill="#171717" />
|
||||||
<circle r="20" cx="1075" cy="525" fill="#171717" />
|
<circle r="20" cx="1075" cy="525" fill="#171717" />
|
||||||
<circle r="20" cx="525" cy="525" fill="#171717" />
|
<circle r="20" cx="525" cy="525" fill="#171717" />
|
||||||
<circle r="20" cx="525" cy="1075" fill="#171717" />
|
<circle r="20" cx="525" cy="1075" fill="#171717" />
|
||||||
</g>
|
|
||||||
<g>
|
<!-- 按钮主体 -->
|
||||||
<linearGradient id="normal" gradientTransform="rotate(45 0 0)">
|
<circle r="220" cx="800" cy="800" fill="black" filter="url(#btn-shadow)" />
|
||||||
<stop stop-color="#4b4b4b" offset="0" />
|
<circle
|
||||||
<stop stop-color="#171717" offset="1" />
|
:r="btnHeight"
|
||||||
</linearGradient>
|
cx="800"
|
||||||
<linearGradient id="pressed" gradientTransform="rotate(45 0 0)">
|
cy="800"
|
||||||
<stop stop-color="#171717" offset="0" />
|
:fill="isKeyPressed ? 'url(#pressed)' : 'url(#normal)'"
|
||||||
<stop stop-color="#4b4b4b" offset="1" />
|
fill-opacity="0.9"
|
||||||
</linearGradient>
|
@mousedown="toggleButtonState(true)"
|
||||||
<circle class="shadow" r="220" cx="800" cy="800" fill="black" />
|
@mouseup="toggleButtonState(false)"
|
||||||
<circle class="light" @mousedown="toggleButtonState(true)" @mouseup="toggleButtonState(false)"
|
@contextmenu.prevent="openContextMenu($event)"
|
||||||
@contextmenu.prevent="openContextMenu($event)" :r="btnHeight" cx="800" cy="800"
|
style="pointer-events: auto; transition: all 20ms ease-in-out;"
|
||||||
fill-opacity="0.9" style="pointer-events: auto;"/>
|
/>
|
||||||
|
|
||||||
|
<!-- 按键文字 -->
|
||||||
<text
|
<text
|
||||||
v-if="bindKey"
|
v-if="bindKey"
|
||||||
x="800"
|
x="800"
|
||||||
|
|
@ -40,20 +55,23 @@
|
||||||
text-anchor="middle"
|
text-anchor="middle"
|
||||||
dominant-baseline="central"
|
dominant-baseline="central"
|
||||||
fill="#ccc"
|
fill="#ccc"
|
||||||
style="font-family: Arial; filter: url(#shadow); user-select: none; pointer-events: none; mix-blend-mode: overlay;"
|
style="font-family: Arial; filter: url(#btn-shadow); user-select: none; pointer-events: none; mix-blend-mode: overlay;"
|
||||||
>
|
>
|
||||||
{{ bindKey.toUpperCase() }}
|
{{ bindKey.toUpperCase() }}
|
||||||
</text>
|
</text>
|
||||||
</g>
|
</svg>
|
||||||
</svg>
|
|
||||||
<div v-if="showContextMenu"
|
<!-- 使用DaisyUI的卡片组件实现上下文菜单 -->
|
||||||
:style="{ top: contextMenuY + 'px', left: contextMenuX + 'px' }"
|
<div v-if="showContextMenu"
|
||||||
@click.stop
|
class="card card-compact fixed z-50 shadow-lg bg-base-100 border border-base-300"
|
||||||
class="fixed z-50 border border-base-300 bg-base-100 rounded-md shadow-lg">
|
:style="{ top: contextMenuY + 'px', left: contextMenuX + 'px' }"
|
||||||
<div class="px-4 py-2 cursor-pointer whitespace-nowrap text-base-content hover:bg-base-200"
|
@click.stop>
|
||||||
@click="startBinding">
|
<div class="card-body p-0">
|
||||||
<span v-if="isBinding">请输入</span>
|
<button class="btn btn-ghost justify-start normal-case w-full h-full" @click="startBinding">
|
||||||
<span v-else>绑定按键: {{ bindKey ? bindKey.toUpperCase() : '未绑定' }}</span>
|
<span v-if="isBinding">请输入</span>
|
||||||
|
<span v-else>绑定按键: {{ bindKey ? bindKey.toUpperCase() : '未绑定' }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -65,29 +83,28 @@ interface Props {
|
||||||
width?: string | number
|
width?: string | number
|
||||||
height?: string | number
|
height?: string | number
|
||||||
}
|
}
|
||||||
const bindKey = ref('');
|
|
||||||
let isKeyPressed = false;
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
width: 160,
|
width: 160,
|
||||||
height: 160,
|
height: 160,
|
||||||
})
|
})
|
||||||
|
|
||||||
const btnHeight = ref(200)
|
const bindKey = ref('');
|
||||||
|
let isKeyPressed = false;
|
||||||
const colorMatrix = ref("1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0")
|
const btnHeight = ref(200);
|
||||||
|
const colorMatrix = ref("1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0");
|
||||||
function toggleButtonState(isPressed: boolean) {
|
|
||||||
btnHeight.value = isPressed ? 210 : 200;
|
|
||||||
colorMatrix.value = isPressed
|
|
||||||
? "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.7 0"
|
|
||||||
: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0";
|
|
||||||
}
|
|
||||||
|
|
||||||
const isBinding = ref(false);
|
const isBinding = ref(false);
|
||||||
const showContextMenu = ref(false);
|
const showContextMenu = ref(false);
|
||||||
const contextMenuX = ref(0);
|
const contextMenuX = ref(0);
|
||||||
const contextMenuY = ref(0);
|
const contextMenuY = ref(0);
|
||||||
|
|
||||||
|
function toggleButtonState(isPressed: boolean) {
|
||||||
|
btnHeight.value = isPressed ? 210 : 200;
|
||||||
|
colorMatrix.value = isPressed
|
||||||
|
? "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.7 0"
|
||||||
|
: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0";
|
||||||
|
}
|
||||||
|
|
||||||
function openContextMenu(e: MouseEvent) {
|
function openContextMenu(e: MouseEvent) {
|
||||||
contextMenuX.value = e.clientX;
|
contextMenuX.value = e.clientX;
|
||||||
contextMenuY.value = e.clientY;
|
contextMenuY.value = e.clientY;
|
||||||
|
|
@ -135,21 +152,3 @@ onUnmounted(() => {
|
||||||
window.removeEventListener('click', closeContextMenu);
|
window.removeEventListener('click', closeContextMenu);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="postcss">
|
|
||||||
circle {
|
|
||||||
transition: all 20ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow {
|
|
||||||
filter: url(#shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.light:active {
|
|
||||||
fill: url(#pressed);
|
|
||||||
}
|
|
||||||
|
|
||||||
.light {
|
|
||||||
fill: url(#normal);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue