如何限制更大的HTML视图< canvas> "内部"其父< div&gt ;? [英] How to limit the view of a larger HTML <canvas> "inside" its parent <div>?

问题描述

我有一个5500 pxl宽的全景img（使用usemap ='＃imagemap'），我在其上覆盖了一个画布。这些是在一个div内进行的。

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

另外，画布不会随div / img一起滚动。我必须在onscroll（）中移动它。

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

可以一个画布被保存在它的父div中，有限制的视图，并滚动？

如果是这样，怎么样？

CSS：

  #divPano {
 width：100％; 
溢出：auto; 
} 
 #cvsPano {
 pointer-events：none; / *使画布对鼠标透明 - 因为画布是图像的前面位置，所以需要* / 
 position：absolute; 
} 
  

和HTML：

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

以及覆盖JS（从onload（）调用）：

 函数cvsInit（cvs，img）{
 var x，y，w，h; 
 
 //得到它的位置和宽度+高度
 x = img.offsetLeft; 
 y = img.offsetTop; 
 w = img.width; 
 h = img.height; 
 
 //将cvsPano放置在图像前面
 cvs.style.zIndex = 1; 
 cvs.parentNode.style.zIndex = 2; //<  - 这不起作用:-( 
 
 //将它放在图片上
 cvs.style.left = x +'px'; 
 cvs.style .top = y +'px'; 
 
 //使图像大小相同
 cvs.setAttribute（'width'，w +'px'）; 
 cvs.setAttribute 'height'，h +'px'）; 
 
 //得到它的上下文
 hdc = cvs.getContext（'2d'）; 
 
 //设置填充/描边操作的颜色/宽度的'默认'值
 hdc.strokeStyle ='＃007700'; 
 hdc.lineWidth = 1; 
 
} // function cvsInit （）
  

解决方案

position：relative 和超大的子画布 position：absolute 。

1. 使用 overflow：scroll 或

   添加滚动条
   

2. overflow：hidden 并将画布移动到 left：-100px 。

使用滚动条进行平移

  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;  

body {background-color：ivory;填充：50像素; } {画布位置：绝对的; border：1px solid red;}＃parent {position：relative;溢出：滚动;宽度：300像素;高度：300像素;边框：2px纯蓝色; }

< div id = parent> < canvas id =canvaswidth = 800 height = 500>< / canvas>< / div>

以编程方式显示

var canvas = document.getElementById （）; 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\";

  body {background-color：ivory;填充：50像素; } {画布位置：绝对的;左：0像素; border：1px solid red;}＃parent {position：relative;溢出：隐藏;宽度：300像素;高度：300像素;边框：2px纯蓝色; }  

 < 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 =canvaswidth = 800 height = 500>< / canvas>< / div>  

I've got a 5500 pxl wide panorama img (with usemap='#imagemap') on which I've overlain a canvas. These are parented inside a div.

Everything works as expected; the img view is restricted to the div, and can be scrolled. But the complete (wiiiide) canvas is visible in the browser window.

In addition, the canvas doesn't scroll with the div/img. I have to move it in an onscroll().

Edit: Here's a fiddle http://jsfiddle.net/91y2upam/1/ showing the canvas (outlined in green) escaping from the div.

Can a canvas be kept "inside" its parent div, with restricted view, and scrolled?

If so, how so?

The 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;
  }

and HTML:

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

and the overlay JS (called from 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()

解决方案

Make the parent position:relative and the oversized child canvas position:absolute.

1. Add scrollbars with overflow:scroll or

2. Pan programmatically with the parent overflow:hidden and moving the canvas with left:-100px.

Pan using scrollbars

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";

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; }

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

Pan programatically

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";

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; }

<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>

这篇关于如何限制更大的HTML视图< canvas> "内部"其父< div&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！