reactjs - Barcode generation for product label - Stack Overflow

admin管理员组

文章数量:1355660

I'm building a label editor in React using:

• react-konva for canvas-based rendering
• JsBarcode for barcode generation

Barcodes are added as <Image> elements inside a <Group> with a <Text> label underneath The barcode shows up fine, but when I resize manually using the Transformer, the barcode:

• Visually scales while dragging
• But snaps back to original size when the mouse is released

The border updates, but the image resets (see screenshots)

Barcode Creation:

const canvas = document.createElement("canvas");
    JsBarcode(canvas, value, { format, width: 2, height: 100 });
    const img = new window.Image();
    img.src = canvas.toDataURL();
    img.onload = () => {
      setElements([...elements, {
        id: Date.now(),
        type: "barcode",
        image: img,
        width: canvas.width,
        height: canvas.height,
        value,
        format,
      }]);
    };

Transform Logic:

<Group
  ref={...}
  draggable
  x={el.x}
  y={el.y}
  rotation={el.rotation}
  onTransformEnd={(e) => {
    const node = e.target;
    const scaleX = node.scaleX();
    const scaleY = node.scaleY();
    node.scaleX(1);
    node.scaleY(1);

    const newWidth = Math.max(10, node.width() * scaleX);
    const newHeight = Math.max(10, node.height() * scaleY);

    updateElement(el.id, {
      x: node.x(),
      y: node.y(),
      width: newWidth,
      height: newHeight,
      rotation: node.rotation(),
    });

    // Regenerate barcode?
  }}
>
  <Image image={el.image} width={el.width} height={el.height} />
  <Text text={el.value} ... />
</Group>

But el.image doesn't update. Even if I regenerate with JsBarcode in onTransformEnd, the image is blank until reload.

How to properly regenerate the JsBarcode image and apply it after resizing?

Should I debounce image updates or use refs/state differently?

Anyone have a working resize-then-redraw barcode Konva pattern?

本文标签： reactjsBarcode generation for product labelStack Overflow