資訊專欄INFORMATION COLUMN
摘要：交互中的復(fù)雜問題拖動物體擺放位置物體的寬高，起點(diǎn)位置都已計(jì)算拖動物體過程中移動過程中移動距離需要縮放元素目標(biāo)位置是否為預(yù)設(shè)的位置判斷預(yù)設(shè)位置已進(jìn)行計(jì)算
需求：需要展示的數(shù)據(jù)已在數(shù)據(jù)庫設(shè)置好，并且是以大屏幕為準(zhǔn)，現(xiàn)在需要在不同設(shè)備上顯示出來
背景 居中鋪滿
background-position: center center; background-size: cover;
中間內(nèi)容 水平和垂直居中
width:500px; height:300px; // 假設(shè)寬高是這么多 position:absolute; top:50%, left:50%; transition:translate(-50% -50%);
canvas畫布上的圖形或圖片
canvas上面不同于其他dom，畫布寬高不能通過樣式設(shè)置，否則容易模糊，所以寬高通過計(jì)算后的寬高設(shè)置。
1、canvas上畫的圖形：
canvas寬高縮放后的值顯示，畫布上的元素的每個坐標(biāo)縮放后畫上去。
2、canvas顯示圖片（迷宮）
canvas的寬高，不能縮放，必須整張圖的寬高來顯示，不然圖片會被剪切掉，所以只能將整個canvas渲染完成后使用樣式的scale縮放。引申出的問題是，迷宮中的“小人”運(yùn)動時的對出口的判斷，采用移動的當(dāng)前位置是否超過迷宮的寬高，這時候的寬高也就不能使用縮放后的值，雖然看起來迷宮變小了，但其實(shí)里面的坐標(biāo)是沒有變的。
交互中的復(fù)雜問題
1、拖動物體擺放位置
物體的寬高，起點(diǎn)位置都已計(jì)算
2、拖動物體過程中
移動過程中移動距離需要縮放；
3、元素目標(biāo)位置是否為預(yù)設(shè)的位置判斷
預(yù)設(shè)位置已進(jìn)行計(jì)算
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104988.html
摘要：元素框相對于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。這些相對于布局來說是基礎(chǔ)的，同時也是非常重要的?？梢钥吹剑釉?，其實(shí)對于布局來說，是特別危險的。 前言 現(xiàn)在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔?；蛟S是職責(zé)越來越大，整體的前端井噴式的發(fā)展，使我們只關(guān)注了js，而疏遠(yuǎn)了css和html。 其實(shí)，我們可能經(jīng)常在聊組件化，咋地咋地。但是，回過頭來思...
閱讀 5130·2021-11-25 09:43
閱讀 1704·2021-10-27 14:18
閱讀 1069·2021-09-22 16:03
閱讀 1366·2019-08-30 13:19
閱讀 1588·2019-08-30 11:15
閱讀 1664·2019-08-26 14:04
閱讀 3138·2019-08-23 18:40
閱讀 1179·2019-08-23 18:17
