[2D маркировка] добавить линию линейки в cvat-canvas

1. Обзор сценария

При использовании cvat-canvasразработки 2D-аннотаций иногда нам нужно добавить некоторые линии линейки к 2D-графике, например, линейку расстояния от передней части до текущей камеры. На данный момент нам нужно добавить линии линейки.

Основываясь на cvat-canvasсуществующем шаблоне проектирования фреймворка, логика реализации выглядит следующим образом:

1. При canvasView.tsвыполнении конструктора создайте 10 скрытых линий линейки
2. Добавьте запись API для установки линии линейки, вызывая метод:canvas.showRulerLines([10,20])
3. canvasView.tsДобавлен метод создания линии линейки в

2. Развитие

1、холст.тс

Путь: src/typescript/canvas.ts
Новый метод showRulerLines:

public showRulerLines(coordYs: number[]): void {
    
    
    this.model.showRulerLines(coordYs);
}

Таким образом, когда мы обращаемся к бизнес-стороне, мы можем использовать эту форму:

//表示我们要在Y坐标30，50，70，90的地方添加标尺线
canvas.showRulerLines([30, 50, 70, 90]);

2、canvasModel.ts

путь:src/typescript/canvasModel.ts

//新增showRulerLines方法
public showRulerLines(coordYs: number[]): void {
    
    
    this.data.rulerLines = coordYs;

    this.notify(UpdateReasons.RULER_LINE_UPDATED);
}
//UpdateReasons中添加事件枚举
export enum UpdateReasons {
    
    
	...
    RULER_LINE_UPDATED = 'ruler_line_updated'
}
//CanvasModel接口添加rulerLines坐标数组，showRulerLines显示标尺线方法
export interface CanvasModel {
    
    
	rulerLines:number[];
	showRulerLines(coordYs: number[]):void;
}
//data变量类型申明添加rulerLines
private data: {
    
    
    ...
    rulerLines:number[]
};

//constructor构造函数初始化时，添加rulerLines
public constructor() {
    
    
	this.data={
    
    
		...
		rulerLines:[]
	};
}
//添加rulerLines的get 操作拦截器
public get rulerLines(): number[] {
    
    
    return this.data.rulerLines;
}

3、canvasController.ts

путь:src/typescript/canvasController.ts

//CanvasController接口添加rulerLines
export interface CanvasController {
    
    
	...
	rulerLines:number[];
}

//添加rulerlines的get拦截器
public get rulerLines(): any {
    
    
    return this.model.rulerLines;
}

4、canvasView.ts

путь:src/typescript/canvasView.ts

export class CanvasViewImpl implements CanvasView, Listener {
    
    
	private rulerLines:SVGSVGElement;
	constructor(){
    
    
		// 标尺线
	    this.rulerLines = window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	    this.rulerLines.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
	    this.rulerLines.setAttribute('version', '1.1');
	    this.rulerLines.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
	    this.rulerLines.setAttribute('xmlns:svgjs', 'http://svgjs.dev/svgjs');
	    this.rulerLines.setAttribute('id', 'cvat_canvas_rulerlines');
	    const colors=["red","orange","yellow","green","cyan","lightgray"];
	    new Array(10).fill(1).map((item,i)=>this.rulerLines.appendChild(createRulerLine(i,colors[i])))
	    //添加到canvas Dom节点下。
	    this.canvas.appendChild(this.rulerLines);  
	    
	    function createRulerLine(index:number,color="lightgray") {
    
       
	        const line = window.document.createElementNS('http://www.w3.org/2000/svg', "rect");
	        line.setAttribute('id', `cvat_canvas_ruler_line${
      
      index}`);
	        line.setAttribute('width', '100%');
	        line.setAttribute('height', '1');
	        line.setAttribute('y', '0');
	        line.setAttribute('fill', color);
	        //默认隐藏，外部调用canvas.showRulerLines([30, 50, 70, 90])时，设置位置并且显示。
	        line.setAttribute('visibility', 'hidden');
	        return line;
	    }
	}
	
	notify(){
    
    
		...
		//添加相应RULER_LINE_UPDATED
		else if (reason === UpdateReasons.RULER_LINE_UPDATED) {
    
    
            const coordYs=this.controller.rulerLines;
            Array.prototype.forEach.call(this.rulerLines.children,(line:any)=>{
    
    
                line.setAttribute('visibility', 'hidden');
            });
            if(coordYs&&coordYs.length){
    
    
                coordYs.forEach((y:number,i:number)=>{
    
    
                    const line=this.rulerLines.children[i];
                    line.setAttribute('y', `${
      
      coordYs[i]}`);
                    line.setAttribute('visibility', 'visible');
                });
            }
        }
	}
	private transformCanvas(): void {
    
    
		...
		//在作放大缩小时，同步更新标尺线的尺寸
		Array.prototype.forEach.call(this.rulerLines.children,(line:any)=>{
    
    
	        line.setAttribute('height', `${
      
      consts.BASE_GRID_WIDTH / this.geometry.scale/2}`);
	    })
	}
}

5、холст.scss

путь:src/scss/canvas.scss

//添加标尺线样式
#cvat_canvas_rulerlines {
    
    
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

3. Окончательный эффект

нормальный размер:

в увеличенном масштабе:

в уменьшенном масштабе:

при запуске:

4. Ресурсы

официальный сайт cvat
исходный код cvat-canvas