Increase text size in Konva.js map when user zooms out

问题

so my question is the following. Using Javascript, HTML, CSS and the library Konvas.js, I'm drawing in a grid, creating segments. Each of those segments as a real value, as presented in the Image 1. My goal is to increase the size of the text with the real value when a user zooms out(Image 2)

Here are the parts of code that makes the draw of the real value, as well it's FontSize. The var lenTxt it 's the one that holds the real value. Thanks

function redrawSegments(segArray){
drawLayer.destroy();
segGrp = new Konva.Group({name:'segments'});
cornGrp = new Konva.Group({name:'corners'});
tGrp = new Konva.Group({name:'tconnections'});
lenGrp = new Konva.Group({name:'lengths'});
/* SEGMENTS */
for(var i=0;i<segArray.length;i++){
    drawShape = new Konva.Line({
        points: [segArray[i].start.x, segArray[i].start.y,
                segArray[i].end.x, segArray[i].end.y],
        strokeWidth: 15,
        stroke: 'black',
        opacity: 1,
        dir:'',
        id:i
    });
    if(drawShape.attrs.points[0]==drawShape.attrs.points[2])
        drawShape.attrs.dir = 'v';
    else if(drawShape.attrs.points[1]==drawShape.attrs.points[3])
        drawShape.attrs.dir = 'h';
    drawShape.on('mouseover', function (e) {
        if(mouseMode == 1 && selSegment !== e.target.attrs.id){
            this.stroke('#092C70');
            drawLayer.draw();
        }
    });
    drawShape.on('mouseout', function (e) {
        if(mouseMode == 1 && selSegment !== e.target.attrs.id){
            this.stroke('black');
            drawLayer.draw();
        }
    });
    drawShape.on('mouseup', function (e){
        if(mouseMode == 1){
            if(selSegment !== null){
                var aux = getDesignSegByID(selSegment);
                if(aux !== -1)
                    segGrp.children[aux].stroke('black');
                selSegment = null;
            }
            selSegment = e.target.attrs.id;
            this.stroke('#264F9F');
            drawLayer.draw();
            //make delete button active
            $('#delButton').removeClass('btn_disabled');
        }
    });
    segGrp.add(drawShape);

    //Length indicator
    var lenTxt = new Konva.Text({
        align: 'center',
        verticalAlign: 'middle',
        fontSize: 12,
        resizeEnabled:true
    });        

      if(drawShape.attrs.dir === 'v'){
        lenTxt.rotation(90);
        lenTxt.x(drawShape.attrs.points[0]-18);
        lenTxt.y(drawShape.attrs.points[1]);
        if(drawShape.attrs.points[1] > drawShape.attrs.points[3])
            lenTxt.y(drawShape.attrs.points[3]);
    }else{
        //length dashed line
        lenTxt.rotation(0);                    
        lenTxt.y(drawShape.attrs.points[1]-25);
        lenTxt.x(drawShape.attrs.points[0]);
        if(drawShape.attrs.points[0] > drawShape.attrs.points[2])
            lenTxt.x(drawShape.attrs.points[2]);
    }                
    lenTot = getSegLength(segArray[i]);
    lenTxt.text(lenTot +' mm');
    lenTxt.width(lenTot/gridSizeInMM * gridSize);
    lenGrp.add(lenTxt);

}

drawLayer.add(segGrp);
drawLayer.add(lenGrp);

回答1:

You just need to scale (or increase fontSize) the text every time you zoom your canvas.

It can be something like this:

// find current absolute scaling
const absoluteScale = text.getAbsoluteScale();

// now we want to have absolute scale = 1,
// then how much do we need to change current scale of the text?
const deltaX = 1 / absoluteScale.x;
const deltaY = 1 / absoluteScale.y;

text.scaleX(text.scaleX() * deltaX);
text.scaleY(text.scaleY() * deltaY);

Also, you may need to set offsetX and offsetY or change x and y to make sure that the text stays on a consistent position.

来源：https://stackoverflow.com/questions/60757623/increase-text-size-in-konva-js-map-when-user-zooms-out

标签

javascript

html

konvajs