使用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在谷歌瀏覽器中居中畫布元素

回答

相關問題