1

I have the following code in a simple, html file:

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

This code is supposed to draw a very simple, single line, from the top, left of the browser space, to 150, 150.

However, when I test this, nothing is drawn on the page.

I'm on Windows Vista Business, up to date, I'm using Google Chrome Version 23.0.1271.97 m.

Now, if I add another set of points in the points array - to look like this:

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

when I reload the page including this change, the code works as expected.

Now, further play and research, turned that, if I want to keep this array:

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

I have to add the following, in the line configuration code:

dashArray: [1, 1]

with the "dashArray" property, the line is correctly drawn with the initial array problem.

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

Is this a bug?

Is this expected behavior? I cannot find any documentation about this.

Thank you!

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 回答