Question

我是kineticJs＆amp;的新手画布

我通过kineticJs＆amp; amp;生成地图使用svg路径的画布....

地图已成功渲染..

我需要在每个画布中放置每个图层的文本中心。

我尝试实现，但仍然无法将文本解析为图层。

请参阅下面的jsFiddle链接。

使用此方法我正在生成方法

var simpleText = new Kinetic.Text({
    x: path.getX(),
    y: path.getY(),
    text: key,
    fontSize: 24,
    fontFamily: 'Calibri',
    width:path.getWidth() ,
    align: 'center',    
    fill: 'white'
});

请咨询 - js fiddle

Answer 1

这是jsfiddle：http://jsfiddle.net/edward_lee/dqhzjnut/18/

您需要计算每个路径的边界以放置路径的文本中心。在path.dataArray中找到具有svg数据的最小x，y和最大x，y。

var minX = 9999;
var minY = 9999;
var maxX = -1;
var maxY = -1;

path.dataArray.forEach(function(data){
    if(data.command == 'C' || data.command == 'L'){
        if(data.start.x < minX) minX = data.start.x;
        if(data.start.x > maxX) maxX = data.start.x;
        if(data.start.y < minY) minY = data.start.y;
        if(data.start.y > maxY) maxY = data.start.y;
    }
});

然后放置Kinetic.Text路径中心

var simpleText = new Kinetic.Text({
    x: (minX + maxX) / 2,
    y: (minY + maxY) / 2,
    text: key,
    fontSize: 24,
    fontFamily: 'Calibri',
    align: 'center',    
    fill: '#c00'
});

这是对评论的回复

要根据屏幕分辨率调整画布大小，窗口调整大小事件需要事件处理程序。

window.onresize = function(e){
    ...
}

在处理程序中，根据窗口内部大小调整舞台大小，设置舞台比例，绘制地图图层。我将比例常数设置为1/800。

stage.setWidth(window.innerWidth);
stage.setHeight(window.innerHeight);
stage.scaleX(window.innerWidth/800);
stage.scaleY(window.innerWidth/800);
mapLayer.draw();

要在鼠标悬停路径时更改文本颜色，可以使用附加在路径上的鼠标悬停处理程序。首先，您需要连接路径和文本以确定鼠标悬停路径时将更改哪种文本颜色。 Kinetic.Path对象不使用'text'属性，所以我将path.text指向simpleText。

path.text = simpleText;

然后改变path.text的颜色

path.on('mouseover', function () {
    this.setFill(bahrainMap.governorates[this.attrs.id].hoverColor);
    this.text.fill('#00cc00');
    mapLayer.draw();
});

没有用于设置背景颜色的API，因此您可以使用css代码。

#container{
    background-color:#ccc;
}

如何使用kinetic js将文本放在图层中？

1 个答案:

这是对评论的回复