我正在尝试学习 JavaScript 和 html5 canvas，但是，事实证明它有点令人困惑，我不明白为什么它似乎不起作用......
我正在创建一个简单的 map ，它具有谷歌地图的一些功能(拖放/放大/缩小/等)。为了做到这一点，我选择了 html5 canvas 和 easeljs 来实现拖放功能。
我有一个 javascript 文件 (path.js)，其中包含 2 个函数:
pathConstructor() - easeljs 教程中的示例函数
drawMap() - 第一个函数的副本略有修改(现在可能是错误的)
当我从 Canvas 调用 pathConstructor() 时，一切正常，但是，在我用 drawMap() 替换它之后，一切都停止工作。如果我现在用pathContrcutor()替换drawMap()，它甚至无法工作。
我在从 Canvas 和 pathConstructor() 内部调用该函数之前和之后放置了一些警报。之前的警报响起，但其他警报没有响起，因此由于某种原因，该函数永远不会被调用...
如果我使用 pathConstructor 代码作为 Canvas 中的内联代码，那么它工作得很好，但是，我想避免这种情况，因为我认为这是糟糕的编程。我希望它整洁并且每个脚本都有自己的文件。
有人知道为什么会发生这种情况吗？
HTML
<!Doctype html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="path.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" width="1300px" height="800px"style="border:1px dotted black;">
<script>pathConstructor();</script>
</canvas>
</body>
</html>
Javascript
var stage;
function pathConstructor() {
alert('inside pathConstructor');
stage = new createjs.Stage('canvas');
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.on("pressmove", function(evt) {
// currentTarget will be the container that the event listener was added to:
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
// make sure to redraw the stage to show the change:
stage.update();
});
stage.update();
}
function drawMap() {
stage = new createjs.Stage('canvas');
var bitMap = new createjs.Bitmap('middle-earth-map.jpg');
stage.mouseMoveOutside = true;
var dragger = new createjs.Container();
dragger.x = dragger.y = 0;
dragger.addChild(bitMap);
stage.addChild(dragger);
dragger.on('pressmove', function(evt2)) {
evt2.currentTarget.x = evt2.stageX;
evt2.currentTarget.y = evt2.stageY;
stage.update();
});
stage.update();
}
最佳答案
对我来说，它工作正常，你只需删除 dragger.on('pressmove', function(evt2)) {;
dragger.on('pressmove', function(evt2)) {
evt2.currentTarget.x = evt2.stageX;
evt2.currentTarget.y = evt2.stageY;
stage.update();
});
关于JS 文件中的 Javascript 函数不会从 Canvas 中调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39136455/