第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當(dāng)我移動圖像然后應(yīng)用旋轉(zhuǎn)變換時,它會“傳送”回其原始位置

當(dāng)我移動圖像然后應(yīng)用旋轉(zhuǎn)變換時,它會“傳送”回其原始位置

蝴蝶刀刀 2023-08-21 17:56:26
我剛剛開始使用 javascript,正在制作一個瀏覽器內(nèi)游戲,其中可以使用 WASD 鍵在屏幕上移動頭像,并且始終旋轉(zhuǎn)以面向光標(biāo)。到目前為止,一切都按預(yù)期工作,但是如果我使用鍵盤在屏幕上移動頭像而不進(jìn)行任何旋轉(zhuǎn),那么一旦我對玩家的頭像圖像應(yīng)用旋轉(zhuǎn),它就會傳送回頁面上的默認(rèn)位置,并且無法不再用鍵盤按鍵移動。我知道問題出在這段代碼的最后一個片段中,我將旋轉(zhuǎn)應(yīng)用于頭像,因為當(dāng)我注釋掉最后一行時,它永遠(yuǎn)不會被傳送回來。這是我的 JavaScript:// Gets the (x, y) position of the avatar's origin relative to top left of the screenfunction getAvatarOrgPosition() {    var rect = avatar.getBoundingClientRect();    var xPos = rect.left;    var yPos = rect.top;    return {        x: xPos,        y: yPos    };}window.addEventListener('mousemove', rotateAvatar);// Makes the avatar point in the direction of the cursorfunction rotateAvatar(e){    var avatarX = getAvatarOrgPosition().x;     var avatarY = getAvatarOrgPosition().y;     var mouseX = getMousePosition(e).x;     var mouseY = getMousePosition(e).y;    // Finds the angle between the cursor and the avatar's position on the screen    var angle = (Math.atan((mouseY - avatarY)/(mouseX - avatarX))) * (180/Math.PI);     if(mouseX - avatarX < 0){        angle += 180;    }    var rotate = 'transform: rotate(' + angle + 'deg);';    avatar.setAttribute('style', rotate);     // Commenting out the above line fixes 'teleport' issue, but obviously doesn't allow any rotation}CSS 是:#avatar{    width: 181px;    height: 70px;    position: absolute;    transform-origin: 10% 50%;    top: 265px;    left: 432px;}
查看完整描述

1 回答

?
汪汪一只貓

TA貢獻(xiàn)1898條經(jīng)驗 獲得超8個贊

當(dāng)您嘗試應(yīng)用多個 CSS 轉(zhuǎn)換時,通常會發(fā)生這種情況。您正在使用transform: rotate輪換,并且可能transform: translate用于該位置。

要將它們一起應(yīng)用,您需要將它們設(shè)置在同一個轉(zhuǎn)換指令中,例如transform: rotate(45deg) translate(10px, 10px).?否則瀏覽器僅應(yīng)用最后一個。

查看完整回答
反對 回復(fù) 2023-08-21
  • 1 回答
  • 0 關(guān)注
  • 119 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號