注解选择器插入错误“n.reduce 不是函数”

问题描述 投票:0回答:1

我正在尝试使用选择器插入另一个插入工具栏,问题是当我选择矩形或多边形时效果很好,我绘制它然后我可以看到要确认的小部件,但是当我选择时圆圈或日食,如果小部件修改了或者格式化程序也修改了,我什至看不到小部件,并且我在控制台中收到此错误:

`Uncaught TypeError: n.reduce is not a function
    at _e (selector.js:1945:23)
    at new u (selector.js:2373:15)
    at a.createEditableShape (selector.js:2557:24)
    at AnnotationLayer.js:436:48
    at kS.emit (index.js:36:20)
    at ToolsRegistry.js:57:46
    at a.emit (selector.js:94:25)
    at selector.js:2552:23
    at i.mouseUp (selector.js:835:29)`

我以为我自己的格式化程序和我自己的小部件有问题,所以我使用了另一个插件的格式化程序ShapeLapel,但仍然是同样的问题, 这是代码:


<html>
  <head>
    <!-- Annotorious first -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
    
  </head>

  <body>
    <div id="my-toolbar-container"></div>
    <img id="hallstatt" src="640px-Hallstatt.jpg">
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
    <script src="annotorious-shape-labels.min.js"></script> 
    <!-- Selector Pack plugin -->
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-selector-pack@latest/dist/annotorious-selector-pack.min.js"></script>
    <script>

      window.onload = function() {
        // Init Annotorious
       

      var anno = Annotorious.init({
          image: 'hallstatt',
          formatter: Annotorious.ShapeLabelsFormatter()
      });
         
        // Init the plugin
        Annotorious.SelectorPack(anno);
        Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'));
        // [ 'rect', 'polygon', 'point', 'circle', 'ellipse', 'freehand' ]
        console.log(anno.listDrawingTools());

      }
    </script>
  </body>
</html>
javascript annotations annotorious
1个回答
0
投票

我想我可能已经通过 Gitter 支持频道回答了这个问题。但对于后代:

由于当前 Annotorious 版本中的错误,

formatter
字段当前需要一个数组作为值。因此,您需要将初始化代码更改为:

var anno = Annotorious.init({
  image: 'hallstatt',
  formatter: [ Annotorious.ShapeLabelsFormatter() ]
});
© www.soinside.com 2019 - 2024. All rights reserved.