1

次のコード サンプルでは、​​HTML5-canvas 要素に描画される画像を使用しています。ただし、これを Chrome でテストすると、画像がすぐに中央に配置されません。IE ではこれに問題はありません (IE9 を使用)。Chrome の開発者ウィンドウを使用して DOM 内の要素の 1 つを選択すると、どういうわけかそれが突然中央に表示されます!!! 何が何を変更しているのかがわからないため、デバッグが困難です。

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

1 に答える 1

1

この問題を次のように修正しました。Chrome Canary を使用すると、DOM-canvas-elements をクリックしても、要素自体の位置が変更されることはありませんでした (これは Chrome のバグのようです)。最後に追加されたキャンバス要素は、css-position "relative" に配置されていませんでした。これを行うと、キャンバスの上に描いた選択範囲が中央に配置され、「キャンバス」要素全体が (KineticJS を使用して) 確実に配置されます。次のように、jQuery を使用して css-position-property を動的に設定する必要がありました。

$("#myContainerId canvas:last").css( "position", "relative" );
于 2012-07-20T10:09:28.937 に答える