259 lines
8.1 KiB
Vue
259 lines
8.1 KiB
Vue
<template>
|
|
<div class="ec11-container" :style="{
|
|
width: width + 'px',
|
|
height: height + 'px',
|
|
position: 'relative',
|
|
}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 100 100"
|
|
class="ec11-encoder">
|
|
<defs>
|
|
<!-- 发光效果滤镜 -->
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feFlood result="flood" flood-color="#00ff88" flood-opacity="1"></feFlood>
|
|
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
|
|
<feMorphology in="mask" result="dilated" operator="dilate" radius="1"></feMorphology>
|
|
<feGaussianBlur in="dilated" stdDeviation="2" result="blur1" />
|
|
<feGaussianBlur in="dilated" stdDeviation="4" result="blur2" />
|
|
<feGaussianBlur in="dilated" stdDeviation="8" result="blur3" />
|
|
<feMerge>
|
|
<feMergeNode in="blur3" />
|
|
<feMergeNode in="blur2" />
|
|
<feMergeNode in="blur1" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- 编码器主体渐变 -->
|
|
<radialGradient id="encoderGradient" cx="50%" cy="30%">
|
|
<stop offset="0%" stop-color="#666666" />
|
|
<stop offset="70%" stop-color="#333333" />
|
|
<stop offset="100%" stop-color="#1a1a1a" />
|
|
</radialGradient>
|
|
|
|
<!-- 旋钮渐变 -->
|
|
<radialGradient id="knobGradient" cx="30%" cy="30%">
|
|
<stop offset="0%" stop-color="#555555" />
|
|
<stop offset="70%" stop-color="#222222" />
|
|
<stop offset="100%" stop-color="#111111" />
|
|
</radialGradient>
|
|
|
|
<!-- 按下状态渐变 -->
|
|
<radialGradient id="knobPressedGradient" cx="50%" cy="50%">
|
|
<stop offset="0%" stop-color="#333333" />
|
|
<stop offset="70%" stop-color="#555555" />
|
|
<stop offset="100%" stop-color="#888888" />
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<!-- 编码器底座 -->
|
|
<rect x="10" y="30" width="80" height="60" rx="8" ry="8"
|
|
fill="#2a2a2a" stroke="#444444" stroke-width="1"/>
|
|
|
|
<!-- 编码器主体外壳 -->
|
|
<circle cx="50" cy="60" r="32" fill="url(#encoderGradient)" stroke="#555555" stroke-width="1"/>
|
|
|
|
<!-- 编码器接线端子 -->
|
|
<rect x="5" y="75" width="4" height="8" fill="#c9c9c9" rx="1"/>
|
|
<rect x="15" y="85" width="4" height="8" fill="#c9c9c9" rx="1"/>
|
|
<rect x="25" y="85" width="4" height="8" fill="#c9c9c9" rx="1"/>
|
|
<rect x="81" y="85" width="4" height="8" fill="#c9c9c9" rx="1"/>
|
|
<rect x="91" y="75" width="4" height="8" fill="#c9c9c9" rx="1"/>
|
|
|
|
<!-- 旋钮 -->
|
|
<circle cx="50" cy="60" r="22"
|
|
:fill="isPressed ? 'url(#knobPressedGradient)' : 'url(#knobGradient)'"
|
|
stroke="#666666" stroke-width="1"
|
|
:transform="`rotate(${rotation/2} 50 60)`"
|
|
class="interactive"
|
|
@mousedown="handleMouseDown"
|
|
@mouseup="handlePress(false)"
|
|
@mouseleave="handlePress(false)"/>
|
|
|
|
<!-- 旋钮指示器 -->
|
|
<line x1="50" y1="42" x2="50" y2="48"
|
|
stroke="#ffffff" stroke-width="2" stroke-linecap="round"
|
|
:transform="`rotate(${rotation} 50 60)`"/>
|
|
|
|
<!-- 旋钮上的纹理刻度 -->
|
|
<g :transform="`rotate(${rotation} 50 60)`">
|
|
<circle cx="50" cy="60" r="18" fill="none" stroke="#777777" stroke-width="0.5"/>
|
|
<!-- 刻度线 -->
|
|
<g v-for="i in 16" :key="i">
|
|
<line :x1="50 + 16 * Math.cos((i-1) * Math.PI / 8)"
|
|
:y1="60 + 16 * Math.sin((i-1) * Math.PI / 8)"
|
|
:x2="50 + 18 * Math.cos((i-1) * Math.PI / 8)"
|
|
:y2="60 + 18 * Math.sin((i-1) * Math.PI / 8)"
|
|
stroke="#999999" stroke-width="0.5"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- 编码器编号标签 -->
|
|
<text x="50" y="15" text-anchor="middle" font-family="Arial" font-size="10"
|
|
fill="#cccccc" font-weight="bold">
|
|
EC11-{{ encoderNumber }}
|
|
</text>
|
|
|
|
<!-- 状态指示器 -->
|
|
<circle cx="85" cy="20" r="3" :fill="isPressed ? '#ff4444' : '#444444'"
|
|
:filter="isPressed ? 'url(#glow)' : ''"
|
|
stroke="#666666" stroke-width="0.5"/>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed } from 'vue';
|
|
|
|
interface Props {
|
|
size?: number;
|
|
encoderNumber?: number;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 1,
|
|
encoderNumber: 1
|
|
});
|
|
|
|
// 组件状态
|
|
const isPressed = ref(false);
|
|
const rotation = ref(0);
|
|
|
|
// 拖动状态
|
|
const isDragging = ref(false);
|
|
const dragStartX = ref(0);
|
|
const lastTriggerX = ref(0);
|
|
const dragThreshold = 20; // 每20像素触发一次旋转
|
|
const hasRotated = ref(false); // 标记是否已经发生了旋转
|
|
|
|
// 计算宽高
|
|
const width = computed(() => 100 * props.size);
|
|
const height = computed(() => 100 * props.size);
|
|
|
|
// 定义发出的事件
|
|
const emit = defineEmits(['press', 'release', 'rotate-left', 'rotate-right']);
|
|
|
|
// 鼠标按下处理
|
|
function handleMouseDown(event: MouseEvent) {
|
|
isDragging.value = true;
|
|
dragStartX.value = event.clientX;
|
|
lastTriggerX.value = event.clientX;
|
|
hasRotated.value = false; // 重置旋转标记
|
|
|
|
// 添加全局鼠标事件监听
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
}
|
|
|
|
// 鼠标移动处理
|
|
function handleMouseMove(event: MouseEvent) {
|
|
if (!isDragging.value) return;
|
|
|
|
const currentX = event.clientX;
|
|
const deltaX = currentX - lastTriggerX.value;
|
|
|
|
// 检查是否达到触发阈值
|
|
if (Math.abs(deltaX) >= dragThreshold) {
|
|
hasRotated.value = true; // 标记已经发生旋转
|
|
|
|
if (deltaX > 0) {
|
|
// 右拖动 - 右旋转
|
|
rotation.value += 15;
|
|
emit('rotate-right', {
|
|
encoderNumber: props.encoderNumber
|
|
});
|
|
} else {
|
|
// 左拖动 - 左旋转
|
|
rotation.value -= 15;
|
|
emit('rotate-left', {
|
|
encoderNumber: props.encoderNumber
|
|
});
|
|
}
|
|
|
|
// 更新最后触发位置
|
|
lastTriggerX.value = currentX;
|
|
|
|
// 保持角度在0-360度范围内
|
|
rotation.value = rotation.value % 720;
|
|
if (rotation.value < 0) {
|
|
rotation.value += 720;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 鼠标松开处理
|
|
function handleMouseUp() {
|
|
isDragging.value = false;
|
|
|
|
// 只有在没有发生旋转的情况下才识别为按压事件
|
|
if (!hasRotated.value) {
|
|
// 触发按压和释放事件（模拟快速按压）
|
|
handlePress(true);
|
|
// 使用setTimeout来模拟按压和释放的时序
|
|
setTimeout(() => {
|
|
handlePress(false);
|
|
}, 100);
|
|
}
|
|
|
|
// 移除全局事件监听
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
}
|
|
|
|
// 按压处理
|
|
function handlePress(pressed: boolean) {
|
|
if (pressed !== isPressed.value) {
|
|
isPressed.value = pressed;
|
|
if (pressed) {
|
|
emit('press', { encoderNumber: props.encoderNumber });
|
|
} else {
|
|
emit('release', { encoderNumber: props.encoderNumber });
|
|
}
|
|
}
|
|
}
|
|
|
|
// 暴露组件方法
|
|
defineExpose({
|
|
press: () => handlePress(true),
|
|
release: () => handlePress(false),
|
|
rotateLeft: () => {
|
|
rotation.value -= 15;
|
|
emit('rotate-left', {
|
|
encoderNumber: props.encoderNumber
|
|
});
|
|
},
|
|
rotateRight: () => {
|
|
rotation.value += 15;
|
|
emit('rotate-right', {
|
|
encoderNumber: props.encoderNumber
|
|
});
|
|
},
|
|
isPressed: () => isPressed.value
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
// 添加一个静态方法来获取默认props
|
|
export function getDefaultProps() {
|
|
return {
|
|
size: 1,
|
|
encoderNumber: 1
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
.ec11-container {
|
|
display: inline-block;
|
|
user-select: none;
|
|
}
|
|
|
|
.ec11-encoder {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
.interactive {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|