Angular - 画布在调整大小时不重新绘制形状

Question

我有一个 Angular 应用程序，我在其中使用可以根据用户选择调整大小的画布。现在，当我在表单中调整画布大小时，画布会正确更改大小但上面的所有内容都消失了，我知道画布会自行清除。但后来我调用了一个名为 redraw 的方法，它试图再次在画布上绘制这些形状，但它没有。

当我更改画布中元素的坐标时，我在这里也调用该重绘方法，所有形状再次出现。有人可以帮我解决这个问题吗？

这是显示问题的视频。

ngOnInit(): void {
        console.log('ngOnInit');
        const canvas: HTMLCanvasElement = this.myCanvas.nativeElement;
        this.context = canvas.getContext('2d');
        this.form = this.formBuilder.group({
            labelName: ['', Validators.required],
            labelOrientation: ['VERTICAL', Validators.required],
            labelWidth: [, Validators.required],
            labelHeight: [, Validators.required],
            barcodeLeft: [, Validators.required],
            barcodeTop: [, Validators.required],
            barcodeWidth: [,],
            barcodeHeight: [,],
            gtinLeft: [, Validators.required],
            gtinTop: [, Validators.required],
            gtinWidth: [,],
            gtinHeight: [,],
        });

        this.form.setValue(this.verticalOrientationData);
        this.objSerialLabelDesignModel = this.form.value;
        if (this.context) {
            console.log('ngOnInit check this.context', this.context);
            this.redrawLabel(this.objSerialLabelDesignModel);
        }
        this.onChanges();
    }

    ngAfterViewInit() {
        console.log('ngAfterViewInit');
        this.startDrawing(this.shapesToDrawArray);
    }

    onChanges(): void {
        console.log('onChange!!!!!!');
        // Subscribe to changes in the form value to redraw the label when it changes
        this.form.valueChanges.subscribe((newVal) => {
            this.objSerialLabelDesignModel = newVal;
            this.redrawLabel(this.objSerialLabelDesignModel);
        });
    }

    redrawLabel(result: ISerialLabelDesign) {
        console.log('inside redrawLabel');    
        this.clearDrawing();
        console.log(this.shapesToDrawArray.length);
        this.shapesToDrawArray.length = 0;
        console.log('result::::::::', result); // giving the entire form.value object
        this.defaultLabelWidth = result.labelWidth * 3.7795; // convert from mm to pixel
        this.defaultLabelHeight = result.labelHeight * 3.7795;            
        this.storeDrawing(result);          
        this.startDrawing(this.shapesToDrawArray);
    }

    startDrawing(shapesToDraw: Shape[]) {
        console.log('inside startDrawing::');
        for (var i = 0; i < shapesToDraw.length; i++) {
            const shape = shapesToDraw[i];
            if (shape.type === 'barcode') {
                this.drawRectangle(this.context, shape.x, shape.y, shape.w, shape.h);
            } else if (shape.type === 'text') {
                this.drawText(this.context, shape);
            }
        }
    }

storeDrawing(result: ISerialLabelDesign) {
    this.saveShapes('barcode', undefined, result.barcodeLeft, result.barcodeTop, result.barcodeWidth, result.barcodeHeight,);
    this.saveShapes('text', 'GTIN:', result.gtinLeft, result.gtinTop, 0, 0, result.labelOrientation);
    this.saveShapes('text', 'UID:', result.uidLeft, result.uidTop, 0, 0, result.labelOrientation);
    this.saveShapes('text', 'EXP:', result.expLeft, result.expTop, 0, 0, result.labelOrientation);
    this.saveShapes('text', 'LOT:', result.lotLeft, result.lotTop, 0, 0, result.labelOrientation);
    this.saveShapes('text', 'C PRICE:', result.costpriceLeft, result.costpriceTop, 0, 0, result.labelOrientation);
    this.saveShapes('text', 'S PRICE:', result.sellingpriceLeft, result.sellingpriceTop, 0, 0, result.labelOrientation);
    this.saveShapes('text', '12345678901234', result.gtinWidth, result.gtinHeight, 0, 0, result.labelOrientation);
    this.saveShapes('text', '12345678901234567890', result.uidWidth, result.uidHeight, 0, 0, result.labelOrientation);
    this.saveShapes('text', '2022-01-01', result.expWidth, result.expHeight, 0, 0, result.labelOrientation);
    this.saveShapes('text', '313', result.lotWidth, result.lotHeight, 0, 0, result.labelOrientation);
    this.saveShapes('text', '250000', result.costpriceWidth, result.costpriceHeight, 0, 0, result.labelOrientation);
    this.saveShapes('text', '550000', result.sellingpriceWidth, result.sellingpriceHeight, 0, 0, result.labelOrientation);
}

saveShapes(type: string, text: string | undefined, x: number, y: number, w: number, h: number, orientation?: string) {
    //console.log('length before push:::',this.shapesToDrawArray.length);
    this.createdShapeObject = {
        type: type,
        text: text,
        x: x * 3.7795,
        y: y * 3.7795,
        w: w * 3.7795,
        h: h * 3.7795,
        orientation: orientation
    };
    this.shapesToDrawArray.push(this.createdShapeObject);
    // Show coordinates based on the text position
    let xCoord = x, yCoord = y;
    if (text && orientation === 'VERTICAL') {
        xCoord += h;
    } else {
        yCoord += h;
    }
    console.log(`(${xCoord}, ${yCoord})`);
}

private drawRectangle(context: CanvasRenderingContext2D, x: number, y: number, w: number, h: number) {
    console.log('inside drawRectangle');
    context.strokeRect(x, y, w, h);
}

private drawText(context: CanvasRenderingContext2D, shape: Shape) {
    console.log('inside drawText', shape)
    context.fillStyle = 'black';
    context.font = '8px Arial';
    console.log('shape.orientation', shape.orientation);
    if (shape.orientation === 'HORIZONTAL') {
        console.log('inside HORIZONTAL shape.orientation', shape.orientation);
        this.drawTextHorizontal(context, shape.text, shape.x, shape.y, shape.w, shape.h);
    } else {
        console.log('inside VERTICAL shape.orientation', shape.orientation);
        this.drawTextVertical(context, shape.text, shape.x, shape.y, shape.w, shape.h);
    }
}

Answer 1

utvjhvgjghkh mh mh jg jg nb jg ghvjhg jh hk hg khf h mh ng hg h hg