Question

我的目的是显示一个400x400（canvas1）的原始画布，并使用一个小画布50x50（canvas2）来选择一个区域，然后将放大的结果显示到画布200x200（canvas3）。我希望canvas2将使用鼠标移动，但canvas3将保持在canvas1的右侧。

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  .container {
position: relative;
border: 1px solid black;
  }
.inner {
    border:1px solid red;
    pointer-events: none;
    position: absolute;
}
    </style>
  </head>
  <body>
    <canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
    <div id="glass" class="inner">
        <canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
        <div class="inner" style="top: 25px; left: 0px; width: 50px;"/>
        <div class="inner" style="top: -25px; left: 25px; height: 50px;"/>
    </div>
    <div id="zoomer" class="container">
        <canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
        <div class="inner" style="top: 100px; left: 0px; width: 200px;"/>
        <div class="inner" style="top: -100px; left: 100px; height: 200px;"/>
    </div>
    <div class="container">
        <input id="browser" type='file' ></input>
    </div>

    <script>
    var glass = document.getElementById('glass');
    var canvas2 = document.getElementById('canvas2');
    var w = canvas2.width;
    var h = canvas2.height; 

    function onMouseMove(event,thiz) {
       var x = event.offsetX;
        var y = event.offsetY;
        glass.style.left = (x - w/2) + 'px';
        glass.style.top = (y - h/2) + 'px';
    }
   </script>
  </body>
</html>

但目前的结果是：

canvas2和canvas3将一起移动。
选择文件按钮与画布3重叠。

我希望只有canvas2（和十字线）与鼠标一起移动，但保持canvas1，canvas3和chosse文件按钮并排静止。

Answer 1

div语句不正确。
使用内联块显示模式。

使用以下html文件：

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  .container {
display: inline-block;
vertical-align: top;
position: relative;
border: 1px solid black;
  }
.inner {
    border:1px solid red;
    pointer-events: none;
    position: absolute;
}
    </style>
  </head>
  <body>
    <canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
    <div id="glass" class="inner">
        <canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
        <div class="inner" style="top: 25px; left: 0px; width: 50px;"></div>
        <div class="inner" style="top: 0px; left: 25px; height: 50px;"></div>
    </div>
    <div id="zoomer" class="container">
        <canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
        <div class="inner" style="top: 100px; left: 0px; width: 200px;"></div>
        <div class="inner" style="top: 0px; left: 100px; height: 200px;"></div>
    </div>
    <input id="browser" type='file' ></input>

    <script>
    var glass = document.getElementById('glass');
    var canvas2 = document.getElementById('canvas2');
    var w = canvas2.width;
    var h = canvas2.height; 

    function onMouseMove(event,thiz) {
       var x = event.offsetX;
        var y = event.offsetY;
        glass.style.left = (x - w/2) + 'px';
        glass.style.top = (y - h/2) + 'px';
    }
   </script>
  </body>
</html>

结果如下：

html - 与css并排的相对布局

1 个答案: