シンプルな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]
});
これはバグですか?
これは予想される動作ですか?これに関するドキュメントが見つかりません。
ありがとうございました!