使用 KineticJS 在 Google Chrome 中居中画布元素答案

【问题标题】：Centering canvas-element in Google Chrome using KineticJS使用 KineticJS 在 Google Chrome 中居中画布元素
【发布时间】：2012-07-12 01:32:36
【问题描述】：

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

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

【问题讨论】：

标签： html google-chrome canvas kineticjs

【解决方案1】：

我按如下方式解决了这个问题。使用 Chrome Canary，我能够单击 DOM-canvas-elements 而无需重新定位元素（这似乎是 Chrome 中的一个错误）。添加的最后一个画布元素未定位 css-position “相对”。这样做可以确保我在画布顶部绘制的选择居中，从而确保整个“画布”元素（使用 KineticJS）。我需要使用 jQuery 动态设置 css-position-property，如下所示：

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

【讨论】：