在组上添加一个圆圈，单击未正确显示 FabricJS

我有以下代码用于名为 App 的 cusomt 对象

App.prototype.createCanvas = function (id){
    var domElement, canvas;
    domElement = document.getElementById(id);
    this.imageUrl = domElement.getAttribute('data-url');
    this.canvas = new fabric.Canvas(id);
    this.canvas.setWidth(800);
    this.canvas.setHeight(600);
    this.loadMainImage();
};
App.prototype.loadMainImage = function(){
    var width, height, aspectRatio;
    var _that = this;
    fabric.Image.fromURL(this.imageUrl, function(oImg){
        _that.mainImage = oImg;
        console.log('loading image');
        if (_that.mainImage.getWidth() > _that.mainImage.getHeight()){
            _that.mainImage.scaleToWidth(600);
        }else{
            _that.mainImage.scaleToHeight(600);
        }
        _that.group = new fabric.Group([_that.mainImage]);
        _that.group.hasRotatingPoint = false;
        //_that.group.add(oImg);
        _that.group.selectable = true;
        _that.group.angle = 0;
        _that.canvas.add(_that.group);
        _that.group.center();
        _that.group.setCoords();
        _that.canvas.renderAll();
        console.log(_that.group.getTop());
        console.log(_that.group.getLeft());
        console.log(_that.group.getWidth());
        console.log(_that.group.getHeight());
    });
};

App.prototype.startCalibration = function(){
    console.log("circle A:"+ this.circleA);
    console.log("circle B"+ this.circleB);
    var _that = this;
    alert("Click on xray to add two points for calibrations");
    var distance;
    this.pointA = null;
    this.pointB = null;
    if (this.calibrate){
        setPoints = function (e){
            var event = e.e;
            console.log(this.group.getLocalPointer(event));
            if (this.pointA == null){
                this.pointA = {
                    x: this.group.getLocalPointer(event).x,
                    y: this.group.getLocalPointer(event).y
                };
                console.log("pointA:{x:"+this.pointA.x+",y:"+this.pointA.y+"}");
                this.circleA = new fabric.Circle({
                    radius:5,
                    fill:"red",
                    left:this.pointA.x,
                    top: this.pointA.y
                });
                console.log("circleA top"+this.circleA.getTop());
                console.log("circleA left"+this.circleA.getLeft());
                this.group.addWithUpdate(this.circleA);

            }else if (this.pointB == null) {
                this.pointB = {
                    x: this.group.getLocalPointer(event).x,
                    y: this.group.getLocalPointer(event).y
                };
                this.circleB = new fabric.Circle({
                    radius:5,
                    fill:"red",
                    top:this.pointB.y,
                    left: this.pointB.x
                });
                this.group.addWithUpdate(this.circleB);

            }
            this.canvas.renderAll();
            if (this.pointB !==null && this.pointA !== null){
                $('#distanceValue').attr('disabled', false);
            }
        }.bind(this);
        this.group.selectable = false;
        this.canvas.renderAll();
        this.group.on('mouseup', setPoints);
    }
};

最后一个函数由外部 JavaScript 文件调用。我想做的是添加到组中加载到画布上的图像上的点，并校准点之间的距离。用户将提供点之间的物理距离，程序将进行校准。圆圈只是为了提供视觉效果，但它们不会出现在我单击的位置。控制台的输出.log为

groupTop: 150
groupLeft: 100
groupWidth:600
groupHeight:300
circle A:null
circle B: null
Object {x: 37, y: 28}
pointA:{x:37,y:28}
circleA top 37
circleA left 28

因此，尽管圆的顶部和左侧对组是正确的，但坐标圆不会按预期显示。它们看起来更靠右，但高度相同。我应该改用 originX 和 originY 吗？

如果可以在此处解决或打开一个新问题，第二个问题是删除功能不起作用