彩虹条刻度尺

<template>
    <div class="ruler-wrapper">
        <!-- 棒棒糖标记组 -->
        <lollipop-marker v-for="item in markers" :key="item.value" :value="item.value" :color="item.color"
            :is-hovered="hoveredValue === item.value" :is-dimmed="hoveredValue !== null && hoveredValue !== item.value"
            :style="{
                left: `${calculatePosition(item.value)}px`,
                zIndex: calculateZIndex(item.value, hoveredValue)
            }" @mouseenter="handleMouseEnter(item.value)" @mouseleave="handleMouseLeave" />

        <!-- 彩虹尺 -->
        <div class="rainbow-ruler" :style="{ width: `${width}px` }" ref="rulerRef"></div>

        <!-- 刻度组 -->
        <div class="scale-container" :style="{ width: `${width}px` }">
            <div v-for="value in scaleValues" :key="value" class="scale-item"
                :style="{ left: `${calculatePosition(value)}px` }">
                {{ value }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useColorGradient } from './composables/useColorGradient'
import { useLollipopMarkers } from './composables/useLollipopMarkers'
import LollipopMarker from './components/LollipopMarker.vue'

// Props 定义
const props = defineProps({
    width: { type: Number, default: 800 },
    minValue: { type: Number, default: -90 },
    maxValue: { type: Number, default: -30 },
    step: { type: Number, default: 5 },
    markerList: {
        type: Array,
        default: () => [
            { value: -85 },
            { value: -80 },
            { value: -75 },
            { value: -75 },
            { value: -70 },
            { value: -65 },
            { value: -61 },
            { value: -60 },
            { value: -55 },
            { value: -50 },
            { value: -45 },
            { value: -40 },
            { value: -35 }
        ]
    }
})

// 引用和状态
const rulerRef = ref(null)
const hoveredValue = ref(null)

// 使用组合式函数
const { getColorAtPosition } = useColorGradient(props.width)
const { markers, updateMarkerColors } = useLollipopMarkers(props, rulerRef, getColorAtPosition)

// 计算刻度值
const scaleValues = computed(() => {
    const values = []
    for (let i = props.minValue; i <= props.maxValue; i += props.step) {
        values.push(i)
    }
    return values
})

// 位置计算
const calculatePosition = (value) => {
    const range = props.maxValue - props.minValue
    return ((value - props.minValue) / range) * props.width
}

// 层级计算
const calculateZIndex = (value, hovered) => {
    const baseZIndex = Math.floor(((value - props.minValue) / (props.maxValue - props.minValue)) * 100) + 1
    return value === hovered ? 1000 : baseZIndex
}

// 事件处理
const handleMouseEnter = (value) => hoveredValue.value = value
const handleMouseLeave = () => hoveredValue.value = null

// 生命周期
onMounted(() => {
    updateMarkerColors()
})

// 监听器
watch(() => props.markerList, updateMarkerColors, { deep: true })
</script>

<style scoped>
.ruler-wrapper {
    position: relative;
}

.rainbow-ruler {
    height: 10px;
    background: linear-gradient(to right,
            red 0%,
            orange 16.66%,
            yellow 33.33%,
            green 50%,
            cyan 66.66%,
            blue 83.33%,
            violet 100%);
}

.scale-container {
    position: relative;
    height: 30px;
}

.scale-item {
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    font-size: 14px;
}

.marker.lollipop {
    position: absolute;
    bottom: 30px;
    transform: translateX(-50%);
    transition: left 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

.lollipop-stick {
    width: 2px;
    height: 10px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.3s ease, filter 0.3s ease;
}

.lollipop-head {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.3s ease, filter 0.3s ease;
}

/* 悬浮状态 */
.marker.lollipop.is-hover {
    transform: translateX(-50%) scale(1.1);
    /* 略微放大 */
}

.marker.lollipop.is-hover .lollipop-stick,
.marker.lollipop.is-hover .lollipop-head {
    filter: brightness(1.2);
    /* 增加亮度 */
}

/* 淡化其他棒棒糖 */
.marker.lollipop.is-dimmed .lollipop-stick,
.marker.lollipop.is-dimmed .lollipop-head {
    filter: grayscale(0.8) opacity(0.4);
    /* 变灰并降低不透明度 */
}
</style>

<template>
    <div class="marker lollipop" :class="{
        'is-hover': isHovered,
        'is-dimmed': isDimmed
    }">
        <div class="lollipop-stick" :style="{ backgroundColor: color }"></div>
        <div class="lollipop-head" :style="{ backgroundColor: color }"></div>
    </div>
</template>

<script setup>
defineProps({
    value: Number,
    color: String,
    isHovered: Boolean,
    isDimmed: Boolean
})
</script>

// 棒棒糖标记相关逻辑
import { computed } from 'vue'

export const useLollipopMarkers = (props, rulerRef, getColorAtPosition) => {
  const calculatePosition = (value) => {
    const range = props.maxValue - props.minValue
    return ((value - props.minValue) / range) * props.width
  }

  const markers = computed(() => {
    return props.markerList.map(item => ({
      ...item,
      color: getColorAtPosition(rulerRef.value, calculatePosition(item.value))
    }))
  })

  const updateMarkerColors = () => {
    if (rulerRef.value) {
      markers.value = props.markerList.map(item => ({
        ...item,
        color: getColorAtPosition(rulerRef.value, calculatePosition(item.value))
      }))
    }
  }

  return { markers, updateMarkerColors }
} 

// 渐变色处理相关逻辑
export const useColorGradient = (width) => {
  const createGradient = (ctx) => {
    const gradient = ctx.createLinearGradient(0, 0, width, 0)
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(0.1666, 'orange')
    gradient.addColorStop(0.3333, 'yellow')
    gradient.addColorStop(0.5, 'green')
    gradient.addColorStop(0.6666, 'cyan')
    gradient.addColorStop(0.8333, 'blue')
    gradient.addColorStop(1, 'violet')
    return gradient
  }

  const getColorAtPosition = (element, x) => {
    if (!element) return ''
    
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = width
    canvas.height = 1
    
    ctx.fillStyle = createGradient(ctx)
    ctx.fillRect(0, 0, width, 1)
    
    const pixelData = ctx.getImageData(x, 0, 1, 1).data
    return `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`
  }

  return { getColorAtPosition }
} 

/* 基础样式 */
.ruler-wrapper {
  position: relative;
}

.rainbow-ruler {
  height: 10px;
  background: linear-gradient(
    to right,
    red 0%,
    orange 16.66%,
    yellow 33.33%,
    green 50%,
    cyan 66.66%,
    blue 83.33%,
    violet 100%
  );
}

.scale-container {
  position: relative;
  height: 30px;
}

.scale-item {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  font-size: 14px;
}

/* 棒棒糖样式 */
.marker.lollipop {
  position: absolute;
  bottom: 10px;
  transform: translateX(-50%);
  transition: left 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

.lollipop-stick {
  width: 2px;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: background-color 0.3s ease, filter 0.3s ease;
}

.lollipop-head {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  transition: background-color 0.3s ease, filter 0.3s ease;
}

/* 交互效果 */
.marker.lollipop.is-hover {
  transform: translateX(-50%) scale(1.1);
}

.marker.lollipop.is-hover .lollipop-stick,
.marker.lollipop.is-hover .lollipop-head {
  filter: brightness(1.2);
}

.marker.lollipop.is-dimmed .lollipop-stick,
.marker.lollipop.is-dimmed .lollipop-head {
  filter: grayscale(0.8) opacity(0.4);
} 

<template>
    <div class="ruler-wrapper">
        <!-- 棒棒糖标记组：显示每个数据点的可视化标记 -->
        <a-tooltip v-for="(item, index) in markers" :key="item.value">
            <template #title>
                值: {{ item.value }}<br>
                序号: {{ index + 1 }}
            </template>
            <div class="marker lollipop" :class="{
                'is-hover': hoveredValue === item.value, // 当前悬停的标记
                'is-dimmed': hoveredValue !== null && hoveredValue !== item.value // 非悬停标记变暗
            }" :style="{
                left: `${calculatePosition(item.value)}px`, // 根据值计算水平位置
                zIndex: calculateZIndex(item.value, hoveredValue), // 控制层级，确保悬停项在最上层
                color: item.color // 添加color属性，用于继承
            }" @mouseenter="handleMouseEnter(item.value)" @mouseleave="handleMouseLeave">
                <!-- 棒棒糖的柄部 -->
                <div class="lollipop-stick" :style="{ backgroundColor: item.color }"></div>
                <!-- 棒棒糖的圆头部分 -->
                <div class="lollipop-head">
                    <!-- 使用随机生成的占位图片 -->
                    <img :src="item.imageUrl" :alt="'image-' + item.value" class="lollipop-image" />
                </div>
            </div>
        </a-tooltip>

        <!-- 彩虹尺：底部的渐变色背景条 -->
        <div class="rainbow-ruler" :style="{ width: `${width}px` }" ref="rulerRef"></div>

        <!-- 刻度组：显示数值刻度 -->
        <div class="scale-container" :style="{ width: `${width}px` }">
            <div v-for="value in scaleValues" :key="value" class="scale-item"
                :style="{ left: `${calculatePosition(value)}px` }">
                {{ value }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { Tooltip as ATooltip } from 'ant-design-vue'

// Props 定义：组件的可配置参数
const props = defineProps({
    width: { type: Number, default: 800 }, // 尺子的总宽度
    minValue: { type: Number, default: -90 }, // 最小刻度值
    maxValue: { type: Number, default: -30 }, // 最大刻度值
    step: { type: Number, default: 5 }, // 刻度间隔
    markerList: {
        type: Array,
        default: () => [
            { value: -85, imageUrl: 'https://picsum.photos/16?random=1' },
            { value: -80, imageUrl: 'https://picsum.photos/16?random=2' },
            { value: -75, imageUrl: 'https://picsum.photos/16?random=3' },
            { value: -75, imageUrl: 'https://picsum.photos/16?random=4' },
            { value: -70, imageUrl: 'https://picsum.photos/16?random=5' },
            { value: -65, imageUrl: 'https://picsum.photos/16?random=6' },
            { value: -61, imageUrl: 'https://picsum.photos/16?random=7' },
            { value: -60, imageUrl: 'https://picsum.photos/16?random=8' },
            { value: -55, imageUrl: 'https://picsum.photos/16?random=9' },
            { value: -50, imageUrl: 'https://picsum.photos/16?random=10' },
            { value: -45, imageUrl: 'https://picsum.photos/16?random=11' },
            { value: -40, imageUrl: 'https://picsum.photos/16?random=12' },
            { value: -35, imageUrl: 'https://picsum.photos/16?random=13' }
        ]
    }
})

// 响应式状态声明
const rulerRef = ref(null) // 彩虹尺的DOM引用
const hoveredValue = ref(null) // 当前悬停的值
const markers = ref([]) // 标记列表，包含位置和颜色信息



// 计算需要显示的刻度值列表
const scaleValues = computed(() => {
    const values = []
    for (let i = props.minValue; i <= props.maxValue; i += props.step) {
        values.push(i)
    }
    return values
})

// 计算值在尺子上的位置（像素值）
const calculatePosition = (value) => {
    const range = props.maxValue - props.minValue
    return ((value - props.minValue) / range) * props.width
}

// 计算标记的层级，确保悬停项显示在最上层
const calculateZIndex = (value, hovered) => {
    const baseZIndex = Math.floor(((value - props.minValue) / (props.maxValue - props.minValue)) * 100) + 1
    return value === hovered ? 1000 : baseZIndex
}

// 更新所有标记的颜色
const updateMarkerColors = () => {
    if (!rulerRef.value) return

    markers.value = props.markerList.map(item => ({
        ...item,
        color: getColorAtPosition(rulerRef.value, calculatePosition(item.value))
    }))
}

// 鼠标事件处理
const handleMouseEnter = (value) => hoveredValue.value = value
const handleMouseLeave = () => hoveredValue.value = null

// 组件挂载后初始化标记颜色
onMounted(() => {
    updateMarkerColors()
})

// 监听标记列表变化，更新颜色
watch(() => props.markerList, updateMarkerColors, { deep: true })

// 创建渐变色：用于获取特定位置的颜色
function createGradient(ctx) {
    const gradient = ctx.createLinearGradient(0, 0, props.width, 0)
    // 设置七种彩虹颜色的渐变停止点
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(0.1666, 'orange')
    gradient.addColorStop(0.3333, 'yellow')
    gradient.addColorStop(0.5, 'green')
    gradient.addColorStop(0.6666, 'cyan')
    gradient.addColorStop(0.8333, 'blue')
    gradient.addColorStop(1, 'violet')
    return gradient
}

// 获取特定位置的颜色值
function getColorAtPosition(element, x) {
    if (!element) return ''

    // 创建临时canvas来获取渐变色
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = props.width
    canvas.height = 1

    // 绘制渐变并获取像素数据
    ctx.fillStyle = createGradient(ctx)
    ctx.fillRect(0, 0, props.width, 1)

    const pixelData = ctx.getImageData(x, 0, 1, 1).data
    return `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`
}
</script>

<style scoped>
.ruler-wrapper {
    position: relative;
    width: v-bind(width + 'px');
}

.rainbow-ruler {
    height: 2px;
    background: linear-gradient(to right,
            red 0%,
            orange 16.66%,
            yellow 33.33%,
            green 50%,
            cyan 66.66%,
            blue 83.33%,
            violet 100%);
}

.scale-container {
    position: relative;
    height: 16px;
}

.scale-item {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    font-size: 10px;
}

.marker.lollipop {
    position: absolute;
    bottom: 18px;
    transform: translateX(-50%);
    transition: all 0.3s ease;
    /* 使用 all 确保所有变化都有过渡效果 */
}

.lollipop-stick {
    width: 2px;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.3s ease, filter 0.3s ease;
}

.lollipop-head {
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
}

.lollipop-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.lollipop-image {
    width: 16px;
    height: 16px;
    object-fit: contain;
    z-index: 1;
    transition: all 0.3s ease;
}

/* 修改悬浮和未悬浮状态的样式 */
.marker.lollipop.is-hover {
    transform: translateX(-50%) scale(1.1);
    z-index: 100;
}

/* 修改未悬浮状态的样式 */
.marker.lollipop.is-dimmed {
    opacity: 0.4;
    /* 整体透明度 */
    filter: grayscale(0.8);
    /* 灰度效果 */
}

/* 添加气泡提示样式 */
.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 8px;
    z-index: 1000;
}

/* 添加小三角 */
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
</style>