javascript - 当用户缩小时增加 Konva.js 地图中的文本大小
问题描述
所以我的问题如下。使用 Javascript、HTML、CSS 和库 Konvas.js,我在网格中绘制,创建段。这些段中的每一个都是真实值,如图 1 所示。我的目标是在用户缩小时使用真实值增加文本的大小(图 2)
以下是绘制真实值的代码部分,以及 FontSize。var lenTxt it 是拥有真正价值的那个。谢谢
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);
解决方案
fontSize
每次缩放画布时,您只需要缩放(或增加)文本。
它可以是这样的:
// 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);
此外,您可能需要设置offsetX
和offsetY
/或更改x
并y
确保文本保持一致的位置。
推荐阅读
- java - Spring Bean - 带参数的构造函数
- r - ggplot2 - 自定义二因素图例
- matlab - MATLAB - 关于 int2int LWT2 和 ILWT
- xamarin - Prism.unity.forms,如何在 contentview 的视图模型中进行依赖注入?
- java - 方法 endsWith() 在 android java 编码中不起作用
- scala - Future map 和 foreach 的行为
- java - 访问 sdcard android studio 上的外部下载文件夹的替代方法
- openssl - initscripts 与 1:redhat-release-server 冲突
- python - Jupyter notebook 64 bits 安装在带有 Oracle 11g 32 bits 客户端的 windows 64 bits 机器上
- php - 无法从 html 代码访问 php-mysql 连接