Looking at the example below, it's essential to ensure that the drawFunc method completes before proceeding to add the opacity and ultimately including foregroundPath to the Kinetic layer.
Is there a way to effectively "wait" for the value of foregroundPath before incorporating it into the layer using Angular JS $q service?
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);
Update #2
@anthony-c - In this scenario, neither the success nor the error callback is being triggered. Instead, I utilized $q.all() as I am also implementing a similar process for a backgroundPath (which is omitted for brevity). The success method consistently executes first in this example. When using console.log(), it becomes evident that the script always executes the success for all promises before proceeding with the drawFunc. Shouldn't the drawFunc be executed before the success method for all promises?
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);
});