由于缺少方法而导致PanoJS失败

Question

我在Rails 4项目中使用PanoJS,我收到以下错误:

TypeError: this.getLevel(...) is undefined
[panojs/pyramid_imgcnv.js][1] Line 92

令我困惑的是,该方法似乎只是在上面几行宣布.

我把它作为PanoJS的一个问题提出来但我很怀疑它只是Rails和Javascript之间的配置错误.我之前已经设置并使用Rails 3项目.我使用了相同的JS文件并以相同的顺序加载它们.我看不出有什么不同(除了Rails版本),但一个版本有效,一个版本没有.

更新:

该元素被声明为(为了简洁,我将数据部分留下了);

%div{ id: "image_viewer", class: "viewer", data: {} }

应该使用以下coffeescript触发JS,但目前我已将其注释掉,因为它只是添加了一个错误,因为addimagezoom不起作用.

jQuery(document).ready ($) ->

  $('#zoomimage').addimagezoom
  largeimage: $('#zoomimage').data('large-image-url'),
  magnifiersize: [$('#zoomimage').data('scaled-x-dimension'),$('#zoomimage').data('scaled-y-dimension')],
  zoomrange: [2, 10]

更新2:

我意识到我在原帖中犯了一个错误.触发器实际上如下所示.以上是我试图让不同的观众工作的人工制品.下面是真正的触发器.

createViewer viewer, 'image_viewer', "#{url_base}/#{image_id}", "#{image_uuid}_", width,  height, target_format

Answer 1

好吧，如果无法看到所有代码的运行，这真的很难。但作为一名夏洛克崇拜者，我可以看到这一点：

该错误表明 的结果this.getLevel(...)在 file 的第 92 行未定义panojs/pyramid_imgcnv.js。源文件指出：

ImgcnvPyramid.prototype.tile_filename = function( level, x_coordinate, y_coordinate ) {
    var l = formatInt( this.getLevel(level).level , 3);
    ...
}

这意味着 的值生成inlevel的结果。检查一下我们可以看到：undefinedgetLevel()getLevel()

ImgcnvPyramid.prototype.getLevel = function( level ) {
    if (level<this._pyramid.length)
        return this._pyramid[ level ];    
    else
        return this._pyramid[ this._pyramid.length-1 ];          
}

因此level是：
A. 未定义，或
B. 指向不存在的数组位置的负数，或
C.数组_pyramid中该位置存储的值未定义

如果我们搜索该函数的任何实例ImgcnvPyramid.tile_filename，我们可以看到它在源代码中的其他任何地方都没有被调用。这意味着实现该库的用户必须调用它。因此，让我们检查一下（并假设）您正在以与演示页面相同的方式实现插件。

该演示覆盖了该tileUrlProvider.assembleUrl方法。当您想要覆盖要使用的每个图块的 url 时，应该实现此函数。在演示实现中我们可以看到：

var myProvider = new PanoJS.TileUrlProvider('','','');
myProvider.assembleUrl = function(xIndex, yIndex, zoom) {
    return MY_URL + '/' + MY_PREFIX + myPyramid.tile_filename( zoom, xIndex, yIndex );
}

如果我们跟踪源代码，zoom传递到用户定义assembleUrl方法的变量应该是undefined或负值，假设加载时发生错误，可能是缩放级别计算错误。罪魁祸首可能是：

PanoJS.js[88]
this.zoomLevel = (typeof options.initialZoom == 'undefined' ? -1 : parseInt(options.initialZoom));

根据此“分析”，这是有意义的，因为返回的默认值是-1。所以综上所述，初始化全景图时包含一个initialZoom值

viewer = new PanoJS(dom_id, {
    initialZoom: 0, // and play with this value to see what happens
    ...
});

另外，检查触发器中width和的值height

createViewer viewer, 'image_viewer', "#{url_base}/#{image_id}", "#{image_uuid}_", width, height, target_format

如果其中之一为负、零或未定义，则缩放值可能会在此过程中计算错误。

很抱歉说得这么冗长，这可能对其他人有帮助，希望对你有帮助。请告诉我们这些建议是否有效，如果无效，请发布一个网址，我们可以在其中查看代码的运行情况。