vue实现反射图
Vue 实现反射效果
在 Vue 中实现反射效果可以通过 CSS 或 Canvas 实现。以下是两种常见方法：
使用 CSS 实现反射
通过 CSS 的 -webkit-box-reflect 属性可以快速创建元素的镜像反射效果：
<template>
<div class="reflection-container">
<img src="your-image.jpg" class="reflected-image">
</div>
</template>
<style>
.reflected-image {
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0,0,0,0.3));
}
</style>使用 Canvas 实现更复杂的反射
对于需要更精细控制的反射效果，可以使用 Canvas：
<template>
<div class="canvas-container">
<canvas ref="canvas" width="400" height="300"></canvas>
</div>
</template>
<script>
export default {
mounted() {
this.drawReflection();
},
methods: {
drawReflection() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
// 绘制原始图像
const img = new Image();
img.src = 'your-image.jpg';
img.onload = () => {
ctx.drawImage(img, 0, 0, 200, 150);
// 创建反射
ctx.save();
ctx.translate(0, 150);
ctx.scale(1, -0.5);
ctx.drawImage(img, 0, 0, 200, 150);
ctx.restore();
// 添加渐变遮罩
const gradient = ctx.createLinearGradient(0, 150, 0, 300);
gradient.addColorStop(0, 'rgba(0,0,0,0.5)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 150, 200, 150);
};
}
}
};
</script>实现动态反射效果
对于需要响应数据变化的反射效果，可以结合 Vue 的响应式特性：
<template>
<div>
<input v-model="text" placeholder="输入文字">
<div class="text-reflection">{{ text }}</div>
</div>
</template>
<script>
export default {
data() {
return {
text: ''
};
}
};
</script>
<style>
.text-reflection {
position: relative;
font-size: 24px;
}
.text-reflection::after {
content: attr(data-text);
position: absolute;
top: 100%;
left: 0;
transform: scaleY(-0.5) translateY(5px);
opacity: 0.5;
filter: blur(1px);
}
</style>性能优化建议
- 对于静态反射效果，优先使用 CSS 方案
- 对动态内容使用 Canvas 时，注意使用
requestAnimationFrame进行优化 - 复杂场景可以考虑使用 WebGL 实现高性能反射
这些方法可以根据具体需求进行调整和组合，以实现不同风格的反射视觉效果。
