如何在Raphael JS中创建矩形左边缘中点的圆点

问题出在你对Raphael rect()方法坐标的理解偏差：rect(x, y, width, height)里的x和y是矩形左上角的坐标，不是中心坐标。你之前错误地把cx=100, cy=100当成了矩形中心来计算左边缘中点，导致位置错误。

给你两种可行的修正方案：

方案1：基于当前矩形左上角坐标计算中点 #

直接用矩形左上角的x作为左边缘的x坐标，左上角y加上高度的一半作为中点的y坐标：

window.onload = function () {
    var paper = Raphael(0,0, 500, 500);
    
    var cx =100, cy = 100;
    var w =120, h = 80;
    // 左边缘中点坐标：x等于矩形左上角x，y等于左上角y加高度一半
    var lmx = cx;
    var lmy = cy + h/2;

    var rec = paper.rect(cx, cy, w, h, 20);
    var cir = paper.circle(lmx, lmy, 1);
};

方案2：先将矩形以(cx, cy)为中心定位，再计算中点 #

如果你希望矩形的中心是(cx, cy)，可以先调整矩形的左上角坐标为cx - w/2和cy - h/2，此时左边缘中点的x就是cx - w/2，y就是cy：

window.onload = function () {
    var paper = Raphael(0,0, 500, 500);
    
    var cx =100, cy = 100;
    var w =120, h = 80;
    // 矩形中心定位后的左边缘中点
    var lmx = cx - w/2;
    var lmy = cy;

    // 让矩形以(cx, cy)为中心
    var rec = paper.rect(cx - w/2, cy - h/2, w, h, 20);
    var cir = paper.circle(lmx, lmy, 1);
};

两种方案都能让圆点精准落在矩形左边缘的中点位置，你可以根据自己的布局需求选择。

内容的提问来源于stack exchange，提问作者Sun