1

シンプルなhtmlファイルに次のコードがあります。

<!DOCTYPE HTML>
<html>
<head>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js">            </script>
<script>

    var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var layer = new Kinetic.Layer();

  var redLine = new Kinetic.Line({
    points: [0, 0, 75, 75, 150, 150],
    stroke: 'red',
    strokeWidth: 2,
    lineCap: 'round',
    lineJoin: 'round'
  });

  layer.add(redLine);
  stage.add(layer);
</script>

このコードは、ブラウザー スペースの左上から 150, 150 まで、非常に単純な 1 本の線を引くことになっています。

ただし、これをテストすると、ページには何も描画されません。

私は Windows Vista Business を使用しています。最新の状態で、Google Chrome バージョン 23.0.1271.97 m を使用しています。

ここで、points 配列に別の点のセットを追加すると、次のようになります。

points: [0, 0, 75, 75, 150, 150, 300, 300],

この変更を含むページをリロードすると、コードは期待どおりに機能します。

さて、さらに遊んで調べて、この配列を保持したい場合は、次のようになりました。

points: [0, 0, 75, 75, 150, 150],

行構成コードに次を追加する必要があります。

dashArray: [1, 1]

「dashArray」プロパティを使用すると、最初の配列の問題で線が正しく描画されます。

  var redLine = new Kinetic.Line({
    points: [0, 0, 75, 75, 150, 150],
    stroke: 'red',
    strokeWidth: 2,
    lineCap: 'round',
    lineJoin: 'round',
    dashArray: [1, 1]
  });

これはバグですか?

これは予想される動作ですか?これに関するドキュメントが見つかりません。

ありがとうございました!

4

1 に答える 1

1

特定の要素が画面に描画されていない場合は、次を呼び出す必要があります。

 .draw() 

アイテムを含むステージまたはレイヤーのいずれか。例えば:

 stage.draw(); or layer.draw();

これにより、ステージまたはレイヤーが再描画されます。

より詳しい情報:

JavaScript の実行方法は、常に私たちが考える方法とは限りません。ステージ作成後に描画をトリガーする何かが必要です。簡単に言えば、window.onload 関数または document.onready 関数を追加して、ページの読み込み時にステージを描画できます。別の解決策は、クリックなどの別のイベントによって描画をトリガーすることです。したがって、onclick 属性を使用してボタンを作成し、ステージ描画をトリガーすることができます。

そのようです:

html:

     <button onclick='javascript:myRedraw()'>Redraw</button>

JavaScript:

    function myRedraw(){
        stage.draw();
    }

ここに更新があります:http://jsfiddle.net/ff4sD/2/

于 2013-01-09T21:05:43.220 に答える