使用KineticJS在谷歌浏览器中居中画布元素

在以下代码示例中，我使用了绘制到HTML5-canvas元素上的图像。但是，在Chrome中进行测试时，它不会立即对图像进行居中。 IE浏览器没有问题（使用IE9）。当您在Chrome中使用开发人员窗口选择DOM中的其中一个元素时，不知何故，它突然居中！它很难调试，因为你看不到有什么变化：使用KineticJS在谷歌浏览器中居中画布元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 2</title> 

    <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js"></script> 
    <script type="text/javascript"> 

     window.onload = function() { 
      var stage = new Kinetic.Stage({ 
       container: "container", 
       width: 578, 
       height: 200 
      }); 
      var layer = new Kinetic.Layer(); 

      var imageObj = new Image(); 
      imageObj.onload = function() { 
       var image = new Kinetic.Image({ 
        x: stage.getWidth()/2 - 53, 
        y: stage.getHeight()/2 - 59, 
        image: imageObj, 
        width: 106, 
        height: 118 
       }); 

       // add the shape to the layer 
       layer.add(image); 

       // add the layer to the stage 
       stage.add(layer); 
       stage.draw(); 
      }; 
      imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"; 
     }; 

    </script> 

</head> 

<body> 

    <h1>Page 3</h1> 
    <div style="text-align: center"> 
     <div id="container"></div> 
    </div> 

</body> 

</html>

来源

2012-07-12 pdvries

我修复了这个问题，如下所示。使用Chrome Canary我能够单击DOM-canvas-elements而无需重新定位元素（这看起来像Chrome中的一个bug）。添加的最后一个canvas元素没有定位到css-position“relative”。这样做确保了我在画布上绘制的选择集中，因此整个“画布”元素（使用KineticJS）。我需要使用jQuery来动态设置css-position-property，如下所示：

$("#myContainerId canvas:last").css("position", "relative");

来源

2012-07-20 10:09:28 pdvries

使用KineticJS在谷歌浏览器中居中画布元素

回答

相关问题