Javascript:如何调用拉斐尔路径上的对象方法?

标签 javascript raphael

我有一个 JavaScript 对象,其中包含许多 Raphael 路径。 (这些路径组成了一堆饼图,它们都绘制在同一张纸上。)我希望每个路径在单击时触发一个对象方法。但是,当我单击路径时,我收到“未捕获的类型错误:未定义不是函数”(Mac OS 版 Chrome)。有谁知道如何做到这一点?这是我的代码的精华:

// Definition of PieChartStack object
function PieChartStack() {

    this.setNodeTree = function (nodeTree) {
        this.nodeTree = nodeTree;
        ...
        this.performInitialSetup();
    }

    this.performInitialSetup = function() {
        ...
        var paper = Raphael("holder", "100%", "100%");
        ...
        paper.customAttributes.segment = function (x, y, r, a1, a2) {
            ...
            return {
                path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
                fill: "hsb(" + clr + ", .75, .8)"
            };
        };

        this.handleSliceTap = function(chartIndex, sliceIndex) {
            console.log(chartIndex + " , " + sliceIndex);
        }

        for (var chartIndex = 0; chartIndex < this.pieCharts.length; chartIndex++) {
            ...
            for (sliceIndex = 0; sliceIndex < sliceCount; sliceIndex++) {
                ...
                var path = paper.path().attr({segment: [this.centerX, this.centerY, 1, start, start + val], stroke: "#fff"});

                // PROBLEM HERE ======================================
                path.click(
                    function (e) {
                        this.handleSliceTap(chartIndex, sliceIndex);
                    }
                );
                //====================================================
            }
        }
    }
    return this;
}

最佳答案

Teemu 明白了——上下文中的“this”是路径,而不是 PieChartStack。通过创建一个新的 var 来修复: var self = this -- 然后这样做:

self.handleSliceTap(chartIndex, sliceIndex);

关于Javascript:如何调用拉斐尔路径上的对象方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25694174/

相关文章:

javascript - 如何在下拉选择上运行 jquery 函数

javascript - 如果为真,则执行其余的 jQuery

javascript - 拉斐尔拖放

javascript - canvg 生成的 Canvas 在视网膜屏幕上模糊

javascript - 减少使用 Web Essentials

javascript - 在 React componentDidUpdate 中调度 redux 操作

algorithm - 是否有一些众所周知的算法可以将用户的绘图变成平滑的形状?

statistics - 如何标准化雷达图的统计数据

java - GWT 可以通过 JSNI 使用 Raphael 吗?

javascript - 将 Backbone.js 与 _.noConflict() 一起使用