在這個例子中，我如何使用Angular JS $ q服務？

在下面的示例中，我需要等待drawFunc方法完成，然後再繼續添加不透明度並最終將foregroundPath添加到Kinetic中的圖層。

在將其添加到使用Angular JS $ q服務的圖層之前，「等待」foregroundPath值的方法是什麼？

var foregroundPath = new Kinetic.Shape({ 
    x: x, 
    y: y, 
    drawFunc: function(context){ 
     context._context.fillStyle = graphic.fill; 
     try{ 
      fabricSVG.render(context); 
     } 
     catch (TypeError) { 
      console.log('Caught TypeError!'); 
     } 
    }, 
    fill: graphic.fill, 
    name: 'graphicMainColor', 
    scale: {x: imageScale, y: imageScale}, 
    rotation: graphic.rotation 
}); 

foregroundPath.opacity(graphicOpactiy); 

var imageLayer = new Kinetic.Layer({name: layerName}); 
imageLayer.add(foregroundPath); 
kineticStage.add(imageLayer);

更新＃2

@安東尼-C - 無論是success或error回調到這兒叫。相反，我使用$q.all()，因爲我也爲backgroundPath做了同樣的事情（爲了簡潔起見，我沒有包括它）。在這個例子中，success方法總是被首先調用。當我做console.log()我可以告訴腳本首先執行success所有的承諾和然後它執行什麼在drawFunc內。它應該在執行所有承諾的success方法之前先執行drawFunc？

var backgroundPathDeferred = $q.defer(); 
var foregroundPathDeferred = $q.defer(); 

// Graphic Shadow Color 
var backgroundPath = new Kinetic.Shape({ 
    x: x - 1, 
    y: y - 1, 
    drawFunc: function(context){ 
     context._context.fillStyle = shadowFill; 
     try{ 
      fabricSVG.render(context); 
     } 
     catch (TypeError) { 
      console.log('Caught TypeError!'); 
      backgroundPathDeferred.reject(TypeError); 
     } 
     backgroundPathDeferred.resolve(); 
    }, 
    fill: shadowFill, 
    name: 'graphicShadowColor', 
    scale: {x: imageScale, y: imageScale}, 
    rotation: graphic.rotation 
}); 

// Graphic Main Color 
var foregroundPath = new Kinetic.Shape({ 
    x: x, 
    y: y, 
    drawFunc: function(context){ 
     context._context.fillStyle = graphic.fill; 
     try{ 
      fabricSVG.render(context); 
     } 
     catch (TypeError) { 
      console.log('Caught TypeError!'); 
      foregroundPathDeferred.reject(TypeError); 
     } 
     foregroundPathDeferred.resolve(); 
    }, 
    fill: graphic.fill, 
    name: 'graphicMainColor', 
    scale: {x: imageScale, y: imageScale}, 
    rotation: graphic.rotation 
}); 

var promises = { 
    'foreground': foregroundPathDeferred, 
    'background': backgroundPathDeferred 
}; 
$q.all(promises).then(function(){ 
    console.log('All promises resolved.', backgroundPath, foregroundPath); 
    backgroundPath.opacity(shadowOpacity); 
    foregroundPath.opacity(graphicOpactiy); 

    var imageLayer = new Kinetic.Layer({name: layerName}); 
    imageLayer.add(backgroundPath); 
    imageLayer.add(foregroundPath); 
    kineticStage.add(imageLayer); 
    kineticStage.find('.background').setZIndex(9999); 
    $('canvas').css({'width': '100%', 'height': '100%'}); 
}, function(error){ 
    console.log('Caught error!', error, foregroundPath, backgroundPath); 
});

來源

2016-12-02 Chad

應該是'VAR承諾= { '前景'：foregroundPathDeferred .promise， 'background'：backgroundPathDeferred.promise };' –

要使用$ Q做

var foregroundPathDeferred = $q.defer(); 
var foregroundPath = new Kinetic.Shape({ 
    x: x, 
    y: y, 
    drawDeferred: foregroundPathDeferred, 
    drawFunc: function(context){ 
     context._context.fillStyle = graphic.fill; 
     try{ 
      fabricSVG.render(context); 
      this.attrs.drawDeferred.resolve(); 
     } 
     catch (error) { 
      this.attrs.drawDeferred.reject(error); 
     } 

    }, 
    fill: graphic.fill, 
    name: 'graphicMainColor', 
    scale: {x: imageScale, y: imageScale}, 
    rotation: graphic.rotation 
}); 
foregroundPathDeferred.promise.then(function(){ 
    foregroundPath.opacity(graphicOpactiy); 
},function(error){ 
    console.log('Caught error!', error); 
}); 
var imageLayer = new Kinetic.Layer({name: layerName}); 
imageLayer.add(foregroundPath); 
kineticStage.add(imageLayer);

來源

2016-12-03 00:32:58

請在我的問題上查看我的「Update＃2」你的答案。 – Chad

@Chad，did'foregroundPathDeferred.resolve（）;'調用？ –

解決/拒絕承諾後，您可能需要調用'$ scope。$ evalAsync（）;'，更新我的答案。 –

您可以只移動該命令之前drawFunc退出：

var foregroundPath = new Kinetic.Shape({ 
    x: x, 
    y: y, 
    drawFunc: function(context){ 
     context._context.fillStyle = graphic.fill; 
     try{ 
      fabricSVG.render(context); 
      foregroundPath.opacity(graphicOpactiy); // <-- move to here 
      imageLayer.add(foregroundPath); // <-- move to here 
     } 
     catch (TypeError) { 
      console.log('Caught TypeError!'); 
     } 
    }, 
    fill: graphic.fill, 
    name: 'graphicMainColor', 
    scale: {x: imageScale, y: imageScale}, 
    rotation: graphic.rotation 
}); 

var imageLayer = new Kinetic.Layer({name: layerName}); 
kineticStage.add(imageLayer);

來源

2016-12-03 00:25:17

在這個例子中，我如何使用Angular JS $ q服務？

回答

相關問題