0

我有几个模块：“Shapes.js”是形状对象的容器（模块“Shape.js”）“Mouse.js”将在用户按下鼠标左键时计算坐标，模块“Selection.js”需要进行计算并确定该坐标是否属于形状。

// 鼠标.js

define([], function() {
    function Mouse(element, e) {        
        var offsetX = 0, offsetY = 0;

        if (element.offsetParent !== undefined) {
            do {
                offsetX += element.offsetLeft; 
                offsetY += element.offsetTop;
            } while ((element = element.offsetParent));
        }

        this.getMouseX = function() {
            return e.pageX - offsetX;
        }
        this.getMouseY = function() {
            return e.pageY - offsetY;
        }
    }
    return Mouse;
});

// 选择.js

define(['modules/Shapes', 'modules/Mouse'], function(Shapes, Mouse) {
    var selection;
    document.getElementById('canvas').addEventListener('mousedown', function(e) {
            selection = null;

            var mouse = new Mouse(document.getElementById('canvas'), e);
            var shapes = Shapes.getShapes();

            for(var i=0; i<shapes.length; i++) {
                if ((shapes[i].getX() <= mouse.getMouseX()) 
                    && (shapes[i].getX() + shapes[i].getWidth() >= mouse.getMouseX()) 
                    && (shapes[i].getY() <= mouse.getMouseY()) 
                    && (shapes[i].getY() + shapes[i].getHeight() >= mouse.getMouseY())) {

                    selection = shapes[i];
                    break;
                }
            }
        });
    return selection;
});

为了保持这个问题很小，我不会发布“形状”和“形状”模块，它们并不重要。

所以现在在“main.js”模块中，当用户触发 mousedown 事件但我无法得到它时，我希望始终引用选定元素（或 null）。甚至不知道从哪里开始。如果我只是在主模块中加载选择模块，我总是会得到未定义的。提前致谢。

（代码片段来自 Simon Sarris 画布教程，稍作修改，只是尝试通过 Require.js 完成所有操作）

编辑：@Katana314，你想过这样的事情吗？
// Selection.js（已编辑）

define(['modules/Shapes', 'modules/Mouse'], function(Shapes, Mouse) {

    var selection;

    return function(e) {
        selection = null;

        var mouse = new Mouse(document.getElementById('canvas'), e);
        var shapes = Shapes.getShapes();

        for(var i=0; i<shapes.length; i++) {
            if ((shapes[i].getX() <= mouse.getMouseX()) 
                && (shapes[i].getX() + shapes[i].getWidth() >= mouse.getMouseX()) 
                && (shapes[i].getY() <= mouse.getMouseY()) 
                && (shapes[i].getY() + shapes[i].getHeight() >= mouse.getMouseY())) {

                selection = shapes[i];
                break;
            }
        }

        return selection;
    }
});

// Main.js

document.getElementById('canvas').addEventListener('mousedown', function(e) {
    console.log(Selection(e)); // Shape... :D
});
4

1 回答 1

1

编辑：误读了一些东西，跳过。下面的原始回复： requirejs 的部分要点是一个模块只被实例化一次。不过，这实际上与您目前的设置背道而驰。

  1. 运行“Mouse.js”'定义函数，将return编辑结果（构造函数）存储为模块路径“鼠标”
  2. 运行“Selection.js”'定义函数，将return编辑结果（selection尚未收到值）存储为模块路径“Selection”
  3. 结果，任何需要“选择”的东西都会有“未定义”。

我认为您在这里想要的目标是从选择返回某种不变的对象，甚至是一个函数。然后，无论需要什么，它都可以执行以下操作：

require('Selection', function(getSelection) {
  var currentElement = getSelection(); // and so on...
});

由于您的问题集中在 RequireJS 上，因此我还没有真正分析代码的其他功能是否存在其他错误。

编辑：实际上，我可能误读了您的语法的一小部分。看起来您已经在模块中返回了一个函数，而不是选择本身。手头的问题可能更多与检查活动选择的代码有关。只是为了验证一下，您是如何在其他代码中包含 Selection 的，并且您是否尝试过使用调试器单步执行其内容？

于 2013-07-30T21:38:56.430 回答