0

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

问题出在第二种方法上。

我将一个对象放入画布，然后用鼠标选择它。现在我订阅了表单 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();
}

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

我做错了什么？

4

1 回答 1

1

您错过了对this.view.setCoords().

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

于 2018-12-02T16:29:28.050 回答