一个游戏的页面,没有任何有用的功能,只是练习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的狗!【该用户已被禁言】

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信