Question

我在一个简单的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。

但是，当我测试时，页面上没有任何内容。

我使用的是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]
  });

这是一个错误吗？

这是预期的行为吗？我找不到任何关于此的文件。

谢谢！

Answer 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/

KineticJS - 绘制一条简单的线 - Kinetic.Line - 奇怪的行为 - 可能是一个错误？

1 个答案: