前端之家

  1. 首页
  2. 问答

在AngularJS中设置范围之前，如何等待图像加载？

• 问答

我正在使用AngularJS和TypeScript。我正在使用带有扩展cytoscape-edgehandles和AngularJS的包装ngCytoscape的cytoscape库。我正在尝试将图像添加到节点的悬停手柄上，但是cytoscape-edgehandles 2.7.1中的drawImage方法的实现不会在绘制之前等待图像加载，因此会发生范围错误。

我已尝试在加载图像后为cytoscape图提供选项，但是cytoscape图希望这些选项可立即使用。所以我需要以某种方式在将图像传递给图形之前加载图像。

在控制器的构造函数中：

this.$scope.ehOptions = this.GetEhOptions();

获取EhOptions方法：

protected GetEhOptions(): GraphModels.EhOptions {
    var options = new GraphModels.EhOptions;

    var img = new Image();
    img.width = 25;
    img.height = 25
    img.src = "../../Content/icons/ic_circle_add_24px.svg";
    options.handleImage = img;
    img.addEventListener('load',e => {
          return options;
    });
}

这将导致图形永远不会加载选项。如果我这样做，我会得到除图像以外的所有选项：

var options = new GraphModels.EhOptions;

var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";

img.addEventListener('load',e => {
   options.handleImage = img;
});
return options;

有关handleIcon的cytoscape-edgehandles代码：

if(options().handleIcon){
    var icon = options().handleIcon;
    var width = icon.width*cy.zoom(),height = icon.height*cy.zoom();
    ctx.drawImage(icon,hx-(width/2),hy-(height/2),width,height);
}

如果将其更改为此，它将起作用：

if (true) {
    var img = new Image();
    var width = 25 * cy.zoom();
    var height = 25 * cy.zoom();
    img.width = width;
    img.height = height
    img.src = "../../Content/icons/ic_circle_add_24px.svg";
    img.addEventListener('load',e => {
        ctx.drawImage(img,hx - (width/2),hy - (height/2),height)
    })
}

但是，我无法更改库代码。

希望您有任何想法。谢谢！

zqf123456zqf 回答：在AngularJS中设置范围之前，如何等待图像加载？

创建AngularJS承诺：

protected GetEhOptions(): GraphModels.EhOptions {

    var deferred = $q.defer();
    var options = new GraphModels.EhOptions;           
    var img = new Image();

    img.width = 25;
    img.height = 25
    img.src = "../../Content/icons/ic_circle_add_24px.svg";
    options.handleImage = img;
    img.addEventListener('load',e => {
         ̶r̶e̶t̶u̶r̶n̶ ̶o̶p̶t̶i̶o̶n̶s̶;̶
         deferred.resolve(options);
    });
    img.addEventListener('error',e => {
         deferred.reject(e);
    });

    return deferred.promise;
}

然后从返回的promise中提取选项：

this.GetEhOptions().then(options => {
  this.$scope.ehOptions = options;
});

有关更多信息，请参见

,

我对cytoscape没有任何想法，但是尝试一下，

options:any = new GraphModels.EhOptions;
let globleThis = this;

var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";
this.options.handleImage = img;

img.addEventListener('load',e => {
   this.GetEhOptions(globleThis.options);
});

protected GetEhOptions(options): GraphModels.EhOptions {
   return options;
}

或

var options = new GraphModels.EhOptions;

var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";

img.addEventListener('load',e => {
   return options.handleImage = img;
});
,

没有使用特定库的经验，但是我使用过类似的库。在那些情况下，我将其包装到自己的指令中，然后直接从那里控制创建。在这种情况下，您可以访问$ element，并且可以即时创建它。

angularjscytoscape.jshtmljavascript
本文链接：https://www.f2er.com/3146794.html

大家都在问