©2020-2024 ioDraw All rights reserved,
Privacy Policy
一个游戏的页面，没有任何有用的功能，只是练习vue语法用
最后一个月，马上要备战期末了，所以我要咕咕咕。
1、目标
写完设置页面，放一下成果图。
2、UI组件的修复
昨天封装的Ui组件，因为z-index的问题把整个页面都盖住了，导致我不能进行页面操作
找了好久都找不到问题所在，耽误了很长时间，以后可不敢瞎写z-index了
去除之后一切正常
3、整体布局
分为左右两部分
左半部分为三个拖动条，右半部分为设置的效果预览
采用斜切 + 移动的方式绘制出区域
4、Range的美化
默认的range是很细小的，需要css的样式设定
.input input[type=range]{ height: 5vh; flex: 1; } .input
input[type="range"]::-webkit-slider-runnable-track{ width: 5vh; height: 5vh;
background-color: black; border-left: 5px solid white; border-right: 5px solid
white; } .input input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:
none; -moz-appearance: none; appearance: none; /*//这三个是去掉滑块原有的默认样式，划重点！！*/
width: 5vh; height: 5vh; color: white; }
range样式
* ::-webkit-slider-container /*可以修改容器的若干样式*/
* ::-webkit-slider-runnable-track /*可以修改轨道的若干样式*/
* ::-webkit-slider-thumb /*可以修改滑块的若干样式*/
不知道为什么滑块的样式不生效，以后在研究吧。
5、v-model双向绑定
html部分 <input type="range" value="0" min="-600" max="600" step="5"
v-model="transition"> script部分 data () { return { transition:0, scale:1,
light:1, } },
6.watch
用于监听滑动条的变化，修改右侧的预览
watch: { transition(now,old){ document.querySelector("#tap").style.top = - 90
/ 3000 * now + 'vh'; }, scale(now,old){
document.querySelector("#tap").style.width = 100 * now + 'px';
document.querySelector("#tap").style.height = 10 * now + 'px'; },
light(now,old){ document.querySelector('.box').style.filter =
`brightness(${now})` console.log(document.querySelector('.box').style.filter); }
7.css滤镜
发现自己不会修改亮度，于是一查就发现了没见过的css属性——滤镜（filter）
《我在css学ps》
css滤镜
效果英文取值说明
高斯模糊blur0~+取值越大越模糊，不接受百分比
亮度brightness百分比可以让图片看起来更亮或更暗，取值越大越亮
对比度contrast百分比0%时图片为全黑
阴影drop-shadow（x,y,b,c）距离，高斯模糊，颜色给图像设置一个合成在图像下面的阴影效果
去色grayscale百分比100%完全变为灰色
色相旋转hue-rotate角度给图像应用色相旋转，360为一个角度
反色invert百分比100%表示完全反转，0%表示没变化
透明度opacity百分比转化图像的透明程度。0%表示完全透明
饱和度saturate百分比转换图像饱和度，0%表示完全不饱和
褐色sepia百分比将图像转换为深褐,100%表示完全深褐色的
8、遗留问题
* Range的滑块样式不生效。
* 滑动条要不要封装成组件。
* 谱面延时问题。
* canvas不会用，判定线绘制问题
9、复习
v-model
watch
叨扰学长和大佬
range样式
css动画和滤镜
10、求助
有看到这里的大佬可以帮我解决下上面的问题吗QAQ
明天要被塞满了，咕咕咕。。。。。。。。
每日犯病：Neko，Neko，Neko，我要做Neko的狗！【该用户已被禁言】