ECG line custom shape with Konva #1681

dobrys · 2023-12-05T13:56:37Z

dobrys
Dec 5, 2023

I'm trying to write a custom Line that draws an ECG

I can do it in such way :

`
//long ecg array
let _data = [100,100 ... ... ... 3,7]
let myLine = new Konva.Line({
sceneFunc: function (context) {
let scale = 10;
let increment = 0.004;
let height = 200;
let width = 1000;
let offset = 0;

                let color = '#0943ee';
                let textColor = '#041840';
                let yPoints = (10 / scale) * 500;
                centralLineY = height / 2;
                yScale = -height / yPoints;
                xScale = increment * (width / 10); //0.2,
                ecgLineWidth = 2 * (height / 500);
                fontDevide = 16;

                context.strokeStyle = color;
                context.lineWidth = ecgLineWidth;
                let px = 0;
                let py = centralLineY;
                context.beginPath();
                context.moveTo(px, py + offset);
                for (let i = 0; i < this.attrs.points.length; i++) {
                    px += xScale;
                    py = (this.attrs.points[i] * yScale + centralLineY);
                    context.lineTo(px, py + offset);
                }
                context.stroke();
                console.log(context)

                // Konva specific method
                context.fillStrokeShape(this);
            },
            points:_data,
            stroke: 'black',
            strokeWidth: 1,
            draggable: true
        });

        layer2.add(myLine)`

And its works.
But I want to have my custom shape somewhere implemented and just use it , i way that other shapes are used :

let ecg = new Kova.myLine({ points:[100,100,.. ... ... 3,7], stroke: 'black', strokeWidth: 1, draggable: true });
How can I do that ?

Answered by lavrton

Dec 18, 2023

I recommend to use simple functions for that:

function createEcgShape(attrs) {
  let myLine = new Konva.Line({
    sceneFunc: function (context) {
       // your code
    }
  });
  return myLine;
}


let ecg = createEcgShape({});
layer.add(ecg);

View full answer

lavrton · 2023-12-18T21:26:45Z

lavrton
Dec 18, 2023
Maintainer

I recommend to use simple functions for that:

function createEcgShape(attrs) {
  let myLine = new Konva.Line({
    sceneFunc: function (context) {
       // your code
    }
  });
  return myLine;
}


let ecg = createEcgShape({});
layer.add(ecg);

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

ECG line custom shape with Konva #1681

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

ECG line custom shape with Konva #1681

Uh oh!

dobrys Dec 5, 2023

Replies: 1 comment

Uh oh!

lavrton Dec 18, 2023 Maintainer

dobrys
Dec 5, 2023

lavrton
Dec 18, 2023
Maintainer