记录一次抽奖大转盘的骚操作

1,109 阅读1分钟

先附上一个git地址 里面有gif效果图
https://github.com/q986171791/scale-position

十一黄金周,领导要求做个大转盘(放假前2天说的,心中万马奔腾)

【然而】(圈出来要考)

看到设计稿我心生灵感

设计稿主要分为3个部分 【大转盘,指针,背景】

可以用固定尺寸把3张图拼接起来,让指针转动就可以啦。。。

【然而】(圈出来要考)

不存在的

自适应 自适应 自适应

想到自适应

我再次心生灵感

echarts 地图自适应不就是用比例尺实现的么

我们完全可以实现一个简单的比例尺,好就这么办

【重点来了】(圈出来要考)

1.我们把1920*1080(通常为显示器最大的分辨率)作为整个中国国土面积

2.把任意手机尺寸作为中国地图

3.动态用 手机宽度 / 1920 得到宽度比例尺 设为scaleX

4.动态用 手机高度 / 1080 得到高度比例尺 设为scaleY

5.凡是涉及到元素的宽度 和 x坐标 都 × scaleX

6.凡是涉及到元素的高度 和 y坐标 都 × scaleY

7.没有7,这样就搞定了,是不是so easy?

【广告】(圈出来要考)

最近在找工作,本人坐标上海松江,上海内不太远都能接受