如何使用RaphaelJS约束广场内的文本元素？

Question

我正在尝试使用自定义字体在正方形内约束文本元素。我很难让限制发生。

我的代码对于移动功能看起来像这样：

if (this.attr("y") > offsetY || this.attr("x") > offsetX) { // keep dragging & storing original x and y
    this.attr({
        x : this.ox + dx,
        y : this.oy + dy
    });
} else {
    nowX = Math.min(offsetX, this.ox + dx);
    nowY = Math.min(offsetY, this.oy + dy);
    nowX = Math.max(0, nowX);
    nowY = Math.max(0, nowY);
    this.attr({
        x : nowX,
        y : nowY
    });
}

约束永远不会发生。但是，如果我使用这个代码的两个方格，它的工作原理。我在这里俯瞰什么？

感谢您的回答:)

Answer 1

如果在调用paper.text()时使用了默认的text-anchor值'middle'，则x和y attrs将返回文本范围中心的坐标 - 而不是其左上角，如它会用矩形。

您应该通过element.getBBox()获取坐标，然后使用结果中的x和y，而不是使用x和y属性宾语。这应该使您现有的逻辑能够畅通无阻。