时间戳

首页 > 解决方案 > 如何在javascript中单击鼠标时使图像向光标旋转，但在按下鼠标时将其旋转重置为0度

javascript - 如何在javascript中单击鼠标时使图像向光标旋转，但在按下鼠标时将其旋转重置为0度

问题描述

我可以找到类似的答案，但不准确。我有一张地图，我希望在单击鼠标时出现汽车图像，并旋转以使其在按住鼠标按钮时始终指向光标，然后在按下鼠标时图像汽车的消失并重置旋转，因此下次单击鼠标时，图像会出现指向屏幕顶部，因此可以再次旋转。我正在尝试在传单地图上的 javascript 中执行此操作。

我遇到的问题是图像没有旋转指向光标，它旋转异常，当鼠标按下时我无法将其重置为指向上方

HTML：

<html>
    <head>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    </head>
    <body>
        <div class="main-container">
        <header>
            <div class="navitem">
            </div> 
        </header>
        <section class="main-content">
            <div id="gameMap">
            </div>
            <img id="carIcon" style="display: none; z-index:1000;height:80;width:100;" src="carIcon.png"/>
        </section>
        </div>
    </body>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script>
    <script src="gameMap1.js"></script>
</html>

JAVASCRIPT：

//Initialize leaflet maps and disable dragging and scrolling
var mymap = L.map('gameMap',{
    renderer: L.canvas()
    }).setView([40.76396283699563, -73.9695559410492], 16);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/satellite-v9',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiaGFsNiIsImEiOiJja2Fld2t4bG0wandzMnpwbmp2a24xemdqIn0.OhKsfnxo_9tOpw30fWU-CQ'
}).addTo(mymap);

mymap.dragging.disable();
mymap.scrollWheelZoom.disable();

let gameMapDiv = document.getElementById('gameMap');
let carImage = document.getElementById("carIcon");

//functions to make car image display and disappear
let displayCarImage = function(e){
    carImage.style.display = '';
    carImage.style.position = 'absolute';
    carImage.style.left = clicked_x-52;
    carImage.style.top = clicked_y+70;
    carImage.style.pointerEvents = 'none';
};
let stopDisplayingCarImage = function(e){
    carImage.style.display = 'none';
    carImage.style.transform = 'rotate(0deg)';
    angle = 0
}

//function to calculate angle to rotate the car image by
angle = 0;
function rotateImageAngle(){
    let angle = Math.atan2(-((clicked_y+72) - mouseY), (clicked_x-50) - mouseX)*(180/Math.PI);  
    return angle;
};


//functions to control what happens when mouse is clicked, moved and depressed
var clicked_x = 0;
var clicked_y = 0;
mymap.on('mousedown', function(e) {
    clicked_x =e.containerPoint.x;
    clicked_y =e.containerPoint.y;
    displayCarImage(e);

});

var mouseX = 0;
var mouseY = 0;
gameMapDiv.addEventListener("mousemove",function(e){
    mouseX = e.clientX; 
    mouseY = e.clientY;
    angleToRotateCar = rotateImageAngle() +'deg'
    carImage.style.transform = 'rotate('+angleToRotateCar+')';
});

mymap.on('mouseup', function(e) {
    stopDisplayingCarImage(e)
});

CSS：

:root {
  position: relative;
  font-family: "Comic Sans MS","Trebuchet MS",Arial, Helvetica, sans-serif;
}
body{
  box-sizing: border-box;
  text-align:center;
  margin:0;
  padding:0;

}
body, html{
  height:100%;
  width:100%
}

.main-container{
  box-sizing: border-box;
  display:flex;
  flex-flow:column;
  height:100%;
}
header{
  flex:0 1 auto;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height:100px;
  background-color: white;
  border-bottom:solid 3px black;
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.19);
  z-index: 1000;
}
.navitem{
  height:80%;
}
.main-content{
  flex:0 2 auto;
  height:100%;
}
#gameMap{
  height:90%;
  z-index:900;
  position:relative;
}
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}

[![https://image.flaticon.com/icons/png/512/0/798.png][1]][1]

标签： javascriptleaflet

解决方案

推荐阅读