提交代码
This commit is contained in:
		
							parent
							
								
									65c63d3317
								
							
						
					
					
						commit
						1faa3b88cc
					
				| 
						 | 
				
			
			@ -5,8 +5,8 @@
 | 
			
		|||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import LabelStudio from 'label-studio';
 | 
			
		||||
import 'label-studio/build/static/css/main.css';
 | 
			
		||||
import LabelStudio from 'label-studio'
 | 
			
		||||
import 'label-studio/build/static/css/main.css'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'CustomLabelStudio',
 | 
			
		||||
| 
						 | 
				
			
			@ -25,7 +25,7 @@ export default {
 | 
			
		|||
          name: "自定义按钮",
 | 
			
		||||
          icon: "🔍",
 | 
			
		||||
          action: () => {
 | 
			
		||||
            console.log("自定义按钮被点击了!");
 | 
			
		||||
            console.log("自定义按钮被点击了!")
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      ],
 | 
			
		||||
| 
						 | 
				
			
			@ -40,6 +40,7 @@ export default {
 | 
			
		|||
        "RELATIONS": "关系",
 | 
			
		||||
        "REGIONS": "区域",
 | 
			
		||||
        "RESULTS": "结果",
 | 
			
		||||
        // 添加更多需要翻译的文本...
 | 
			
		||||
      },
 | 
			
		||||
      labelConfig: `
 | 
			
		||||
        <View>
 | 
			
		||||
| 
						 | 
				
			
			@ -50,9 +51,12 @@ export default {
 | 
			
		|||
          </RectangleLabels>
 | 
			
		||||
        </View>
 | 
			
		||||
      `,
 | 
			
		||||
      previousAnnotations: [] // 用于保存上次的标注框数据
 | 
			
		||||
    };
 | 
			
		||||
      previousAnnotations: [] // 用于保存上次的标注框数据,用于比较变化
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch:{
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.initLabelStudio();
 | 
			
		||||
  },
 | 
			
		||||
| 
						 | 
				
			
			@ -75,53 +79,30 @@ export default {
 | 
			
		|||
          firstName: "James",
 | 
			
		||||
          lastName: "Dean"
 | 
			
		||||
        },
 | 
			
		||||
        task: JSON.parse(this.task),
 | 
			
		||||
        task:JSON.parse( this.task),
 | 
			
		||||
        locale: 'zh_CN',
 | 
			
		||||
        messages: this.chineseLocalization,
 | 
			
		||||
        onLabelStudioLoad: (LS) => {
 | 
			
		||||
          console.log("Label Studio 已加载", LS);
 | 
			
		||||
          var c = LS.annotationStore.addAnnotation({
 | 
			
		||||
 | 
			
		||||
          // 定期检查标注框数据
 | 
			
		||||
          setInterval(() => {
 | 
			
		||||
            this.checkAnnotations(LS);
 | 
			
		||||
          }, 1000);  // 每秒检查一次
 | 
			
		||||
 | 
			
		||||
          // 手动添加一个标注框并选中
 | 
			
		||||
          const annotation = LS.annotationStore.addAnnotation({
 | 
			
		||||
            userGenerate: true
 | 
			
		||||
          });
 | 
			
		||||
          LS.annotationStore.selectAnnotation(c.id);
 | 
			
		||||
          // 注册事件监听
 | 
			
		||||
          LS.annotationStore.events.on('addAnnotation', this.handleAddAnnotation);
 | 
			
		||||
          LS.annotationStore.events.on('updateAnnotation', this.handleUpdateAnnotation);
 | 
			
		||||
 | 
			
		||||
          // 启动定期检查标注框数据
 | 
			
		||||
          this.startAnnotationCheck(LS);
 | 
			
		||||
          // 获取并输出标注的几何信息
 | 
			
		||||
          const box = annotation.geometry;
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 处理新增标注框
 | 
			
		||||
    handleAddAnnotation(annotation) {
 | 
			
		||||
      console.log("新增标注框:", annotation);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 处理更新标注框
 | 
			
		||||
    handleUpdateAnnotation(annotation) {
 | 
			
		||||
      console.log("更新标注框:", annotation);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 启动定期检查标注框数据
 | 
			
		||||
    startAnnotationCheck(LS) {
 | 
			
		||||
      this.checkAnnotationsInterval = setInterval(() => {
 | 
			
		||||
        this.checkAnnotations(LS);
 | 
			
		||||
      }, 1000); // 每秒检查一次
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 停止定期检查
 | 
			
		||||
    stopAnnotationCheck() {
 | 
			
		||||
      if (this.checkAnnotationsInterval) {
 | 
			
		||||
        clearInterval(this.checkAnnotationsInterval);
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 检查标注框数据
 | 
			
		||||
    checkAnnotations(LS) {
 | 
			
		||||
      const currentAnnotations = LS.annotationStore.data;  // 获取当前的标注数据
 | 
			
		||||
 | 
			
		||||
      // 如果标注数据发生了变化
 | 
			
		||||
      if (this.hasAnnotationsChanged(currentAnnotations)) {
 | 
			
		||||
        console.log('标注数据发生变化:', currentAnnotations);
 | 
			
		||||
| 
						 | 
				
			
			@ -131,20 +112,15 @@ export default {
 | 
			
		|||
 | 
			
		||||
    // 比较标注数据是否发生变化
 | 
			
		||||
    hasAnnotationsChanged(currentAnnotations) {
 | 
			
		||||
      // 直接比较标注数量变化
 | 
			
		||||
      if (currentAnnotations.length !== this.previousAnnotations.length) {
 | 
			
		||||
        return true; // 数量不一样说明发生了变化
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      // 比较每个标注框的 ID 和几何信息(减少深度比较)
 | 
			
		||||
      // 比较每个标注框的几何信息
 | 
			
		||||
      for (let i = 0; i < currentAnnotations.length; i++) {
 | 
			
		||||
        const current = currentAnnotations[i];
 | 
			
		||||
        const previous = this.previousAnnotations[i];
 | 
			
		||||
 | 
			
		||||
        if (current.id !== previous.id) {
 | 
			
		||||
          return true; // 标注 ID 不同说明发生了变化
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        // 如果标注框的几何信息有变化,返回 true
 | 
			
		||||
        if (JSON.stringify(current.geometry) !== JSON.stringify(previous.geometry)) {
 | 
			
		||||
          return true;
 | 
			
		||||
| 
						 | 
				
			
			@ -154,7 +130,7 @@ export default {
 | 
			
		|||
      return false;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue