以编程方式调整大小后 fabricjs2 选择错误

Question

我在 angular 6 项目中使用 fabrics v2.4.3。在我的项目中，我想通过鼠标和通过表单编辑属性来移动和调整某些对象（fabric.Group）的大小。

问题出在第二种方法上。

我将对象放入 canvas，然后 select 用鼠标编辑它。现在我订阅了表单 valueChanges 以实时应用 selected 对象的新道具。

this.subscription = this.form.valueChanges.subscribe((value)=>{
  this.panelView.setConfig(value);  
})

这是setConfig方法：

setConfig(config:PanelParameters){
    this.config = config;
    let param = {            
        top: this.config.y,
        left: this.config.x,

        width: this.view.width, //this.config.width,
        height: this.view.height,

        scaleX: this.config.width/this.view.width,
        scaleY: this.config.height/this.view.height,
        fill : this.config.background_color

    }
    this.view.set(param)

    for(let obj of this.view.getObjects()){
        if(  obj instanceof fabric.Rect){
            obj.set({
                fill: this.config.background_color
            })
        }else if( obj instanceof fabric.Text ){
            obj.set({
                fill: this.config.title_text_color
            })
        }
    }

    this.canvas.requestRenderAll();
}

现在进入 canvas 对象已正确呈现，但如果我尝试 select 我必须点击旧对象区域。

我做错了什么？

Answer 1

您未接来电 this.view.setCoords()。

在 fabric.js 中，鼠标交互是根据对象的 oCoords 进行评估的。当您以编程方式设置应导致坐标更改的对象属性时，您必须显式调用 setCoords() 来重新计算它们。参见 When to call setCoords。

以编程方式调整大小后 fabricjs2 选择错误

fabricjs2 selection error after programmatically resize

fabricjs

fabricjs2