gpt4 book ai didi

JS 文件中的 Javascript 函数不会从 Canvas 中调用

转载 作者:行者123 更新时间:2023-12-02 14:14:45 26 4
gpt4 key购买 nike

我正在尝试学习 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com