首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当用户缩小时增加Konva.js地图中的文本大小

当用户缩小时增加Konva.js地图中的文本大小
EN

Stack Overflow用户
提问于 2020-03-19 20:49:50
回答 1查看 225关注 0票数 0

所以我的问题如下。使用Javascript、HTML、CSS和Konvas.js库,我在网格中绘制,创建片段。如图1所示,我的目标是在用户缩小时用实际值增加文本的大小(图2)

下面是绘制实际值的代码部分,以及它的FontSize。var lenTxt才是真正有价值的那个。谢谢

代码语言:javascript
运行
复制
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); 
EN

回答 1

Stack Overflow用户

发布于 2020-03-20 09:05:26

您只需在每次缩放画布时缩放(或增加fontSize)文本。

它可以是这样的:

代码语言:javascript
运行
复制
// 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);

此外,您可能需要设置offsetXoffsetY或更改xy,以确保文本保持一致的位置。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60757623

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档