Question

我是Java Script的绝对初学者。我的任务是制作一个交互式收音机，如果鼠标位于地图上的某个位置，则播放一首歌曲。它可以工作，但只能在浏览器窗口的特定大小。如果我改变大小，“歌曲位置”就会放错地方。

我正在使用p5库。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Trial</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"> </script>
    <script src="../p5.min.js"></script>
    <script src="../addons/p5.dom.min.js"></script>
    <script src="../addons/p5.sound.min.js"></script>

</head>

<body>

    <center><p class="title">CHRISTMAS RADIO</p></center>

    <div class="radio" id="clickArea" onmousemove="trackMouse()"> 
        <img id="radio" onclick="rotate()"  src="images/radio.png""></img>
    </div>

</body>
</html>

这是我的CSS代码：

canvas{
    background-image: url("images/Map1.png");
    background-position: center center;
    background-repeat: no-repeat no-repeat;

    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;

    border:solid 2px;
    border-bottom-color:#ffe;
    border-left-color:#eed;
    border-right-color:#eed;
    border-top-color:#ccb;
    max-height:100%;
    max-width:100%;

}

p.title{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
    font-weight: 900;
    color: white;
    text-shadow: -2px 0 #c61819, 0 2px #c61819, 2px 0 #c61819, 0 -2px #c61819;
}

.radio{
    position:relative;
    top: 10%;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: solid 2px;
    border-color:#52361b;
    padding:0;
    width: 944px;
    height:165px;

}

这是我的Java脚本：

var x = "";
var y = "";
var song1;
var song2;


function preload() {
  song1 = loadSound('audio/2.mp3');
  song2 = loadSound('audio/3.mp3');
}

function setup() {
    createCanvas(944,566);
}

function draw() {
    clear();
    x = mouseX;

  rect(x, y, 20, 565);
  fill(82, 54, 27);

}

function trackMouse(){
var x = event.clientX;
console.log(window.screenX);


if(x>315&&x<340){
song1.loop();
document.getElementById("clickArea").style.backgroundColor="white";

} else {
song1.stop();
document.getElementById("clickArea").style.backgroundColor="black";
    } 

if(x>400&&x<450){
song2.loop();
document.getElementById("clickArea").style.backgroundColor="#FFDAB9";


} else {
song2.stop();
document.getElementById("clickArea").style.backgroundColor="black";
    } 


}

//document.getElementById("canvas").style.background-image="url("images/Map2.png")";

您有任何建议/意见吗？

Answer 1

这是因为您在pixels中使用绝对值来定位广播地图上的区域，并且您在var x中访问它们。即使在调整浏览器大小时，您也需要percentage中的相对值才能使它们保持不变。

您可以尝试执行此操作：获取window.innerWidth和window.innerHeight，将其存储在变量v1 and v2中，即100％。现在要获得relative position coordinates，将你当前使用的位置除以315并乘以100.

示例：假设宽度为最大1200像素，则315为26.25％这就是你将要使用的价值，即使是浏览器已调整大小。
(Absolute coodinate/ Complete width at maximized screen) X 100 = relative coordinate

(315/1200)x100 = 26.25%

请记住根据它对代码进行更改，它应该可以正常工作。希望，它给你的想法。

窗口的X位置随浏览器窗口的变化而变化

1 个答案: