kineticjs - Kinetic JS - 将一条线的长度放在它上面

Question

我正在使用以下方法计算我在画布上绘制的线条的长度：

layer.on("mouseup", function () {
                moving = false;
                var mousePos = stage.getMousePosition();
                x2 = mousePos.x;
                y2 = mousePos.y;
                $("#distance").val(calculateDistance(x1, y1, x2, y2));

            });
function calculateDistance(x1, y1, x2, y2) {
            var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
            distance *= 0.264583333;
            distance = Math.round(distance * 100 / 1) / 100;
            return distance;
}

目前我将距离放在输入字段中；但是我想将它添加为该行的标签！在http://jsfiddle.net/user373721/xzEad/1/进行演示。

我会很感激你的建议，在此先感谢。

Answer 1

你需要一个中点和一个标签。自定义它以满足您的需求。

http://jsfiddle.net/xzEad/2/

            var midX = (line.getPoints()[0].x + line.getPoints()[1].x)/2;
            var midY = (line.getPoints()[0].y + line.getPoints()[1].y)/2;
            var label = new Kinetic.Text({
                x: midX,
                y: midY,
                text: calculateDistance(x1, y1, x2, y2),
                fontSize: 20,
                fontFamily: 'Calibri',
                fill: 'green'
            });
            layer.add(label);
            layer.draw();