Question

我有一个5500像素宽的全景img（使用usemap =＆＃39; #imagemap＆＃39;），我已经覆盖了画布。这些都是div中的父级。

一切都按预期工作; img视图仅限于div，可以滚动。但是完整的（wiiiide）画布在浏览器窗口中可见。

此外，画布不会使用div / img滚动。我必须在onscroll（）中移动它。

编辑：这是一个小提琴http://jsfiddle.net/91y2upam/1/，显示从div中逃脱的画布（以绿色标出）。

可以保留画布＆＃34;内部＆＃34;它的父div，视图受限，并滚动？

若然，怎么会这样？

CSS：

#divPano {
  width:  100%;
  overflow: auto;
  }
#cvsPano {
  pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
  position: absolute;
  }

和HTML：

<div name="divPano" id="divPano">
  <canvas id='cvsPano'></canvas> 
  <img  name='imgPano'  id='imgPano' usemap='#mapPano'  src='Pano/Pano0H500s.jpg' >
  </div>

和重叠JS（从onload（）调用）：

function cvsInit(cvs, img) {
  var x, y,  w, h;

    // get it's position and width+height
  x = img.offsetLeft;
  y = img.offsetTop;
  w = img.width;
  h = img.height;

    // place cvsPano in front of the image
  cvs.style.zIndex = 1;
  cvs.parentNode.style.zIndex = 2;    //  <- this didn't work :-(

    // position it over the image
  cvs.style.left = x+'px';
  cvs.style.top = y+'px';

    // make same size as the image
  cvs.setAttribute('width', w+'px');
  cvs.setAttribute('height', h+'px');

    // get it's context
  hdc = cvs.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
  hdc.strokeStyle = '#007700';
  hdc.lineWidth = 1;

  }    //  function cvsInit()

Answer 1

制作父position:relative和超大儿童画布position:absolute。

使用overflow:scroll或
以编程方式与父overflow:hidden进行平移并使用left:-100px移动画布。

使用滚动条平移

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=function(){
  ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/canvas%20compositing.png";

＆＃13;

body{ background-color: ivory; padding:50px; }
canvas{position:absolute; border:1px solid red;}
#parent{position:relative; overflow:scroll; width:300px; height:300px; border:2px solid blue; }

＆＃13;

<div id=parent>
  <canvas id="canvas" width=800 height=500></canvas>
</div>

＆＃13;

以编程方式展示

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

$myslider=$('#myslider');
$myslider.attr({min:-200,max:0}).val(0);
$myslider.on('input change',function(){
  $('#canvas').css('left',parseInt($(this).val()));
});


var img=new Image();
img.onload=function(){
  ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/canvas%20compositing.png";

＆＃13;

body{ background-color: ivory; padding:50px; }
canvas{position:absolute; left:0px; border:1px solid red;}
#parent{position:relative; overflow:hidden; width:300px; height:300px; border:2px solid blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id=myslider type=range>
<br>
<div id=parent>
  <canvas id="canvas" width=800 height=500></canvas>
</div>

＆＃13;

Answer 2

在css中，尝试将属性溢出更改为其他内容，例如：

overflow: scroll;

也许就这样，它会滚动页面。

如何限制更大的HTML <canvas>＆＃34; inside＆＃34;它的父<div>？

2 个答案: