Question

我正在一个有角度的6项目中使用Fabric v2.4.3。在我的项目中，我想通过鼠标和通过表单进行属性编辑来移动某些对象（fabric.Group）并调整其大小。

问题出在第二种方法上。

我在画布上放置了一个对象，然后用鼠标选中了它。现在，我订阅了valueChanges表单，以实时应用所选对象的新道具。

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();
}

现在将对象正确渲染到画布中，但是如果我尝试选择它我必须单击旧对象区域。

我做错了什么？

Answer 1

您缺少对this.view.setCoords()的呼叫。

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

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

1 个答案: