PDA

View Full Version : how to put an image onto a canvas inside an extjs form or window



ryankore
17 Jul 2013, 3:05 PM
hy guys the following code works



Ext.define('EaselWindow', {
extend: 'Ext.Window'

,html: '<canvas id="demoCanvas" width="500" height="300">'
+ 'alternate content'
+ '</canvas>'

,afterRender: function() {
this.callParent(arguments);

var stage = new createjs.Stage("demoCanvas");

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

stage.update();
}
});


Ext.create('EaselWindow', {
title: "Ext+Easel"
,width: 300
,height: 300
,autoShow: true
});



however this code doesn't and I don't understand why



Ext.onReady( function () {
Ext.define('EaselWindow', {
width: 500,
height: 500,
extend: 'Ext.Window'

,html: '<canvas id="demoCanvas" width="500" height="500">'
+ 'alternate content'
+ '</canvas>'

,afterRender: function() {
this.callParent(arguments);




var stage = new createjs.Stage("demoCanvas");
var myImage = new createjs.Bitmap("dbz.jpg");
stage.addChild(myImage);
stage.update();

} // end after render func
}); // end define


Ext.create('EaselWindow', {
title: "Ext+Easel",
autoShow: true
}); //end easelwindow


});

slemmon
19 Jul 2013, 12:26 PM
I've not worked with canvas much, but I used this tutorial and it seemed to work for me:
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/



Ext.define('EaselWindow', {
extend: 'Ext.Window'

,html: '<canvas id="demoCanvas" width="500" height="300">'
+ 'alternate content'
+ '</canvas>'

,afterRender: function() {
this.callParent(arguments);

var canvas = Ext.fly('demoCanvas').dom;
var context = canvas.getContext('2d');
var imageObj = new Image();


imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}
});




Ext.create('EaselWindow', {
title: "Ext+Easel"
,width: 440
,height: 300
,autoShow: true
});

ryankore
22 Jul 2013, 8:59 AM
hey thank you, I actually eventually figured it out (w/ staxoverflow) but I have another question.... Now I'm trying to make a button that is toggled that will overlay an Image... I got this to happen on click but that seemed much simpler... I actually want to use extjs buttons instead of easel buttons, is that possible?

here's my code.



var overlay = new createjs.Bitmap("stuff.jpg");




Ext.onDocumentReady( function () {
Ext.define('EaselWindow', {
width: 1000,
height: 750,
extend: 'Ext.Window',


html: '<canvas id="demoCanvas" width="1000" height="750">'
+ 'alternate content'
+ '</canvas>'



,afterRender: function() {
this.callParent(arguments);



var stage = new createjs.Stage("demoCanvas");

//var myImage = new createjs.Bitmap("dbz.jpg");
//stage.addChild(myImage);
//stage.update();
var myImage = new Image();
myImage.src = "dbz.jpg";
myImage.onload = setBG;


function setBG(event){
var bgrd = new createjs.Bitmap(myImage);
stage.addChild(bgrd);
stage.update();


bgrd.addEventListener("click", function(){
var seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
seed.x = stage.mouseX-10 ;
seed.y = stage.mouseY-10 ;
stage.addChild(seed);
stage.update();
}); //end addeventlistener

}

}, // end after render func
items:[{
itemId: 'button1',
xtype: 'button',
text: 'click the button',
visible: true,
enableToggle: true,
handler: function(){
this.query('stage').setValue(stage.addChild(overlay)) // this doesn't work, and //probably doesn't make sense to anyone else, but I thought I could like query the ///canvas and place a function inside a value somehow lol


}


},{
itemId: 'button2',
xtype: 'button',
text: 'button2'


}]

}); // end define


Ext.create('EaselWindow', {
title: "Ext+Easel",
autoShow: true
}); //end easelwindow


});

slemmon
25 Jul 2013, 4:12 PM
I'm not quite following what you're wanting to do. You're wanting to change the image rendered in the canvas element using an ExtJS toggle button?

punterf16
8 Mar 2014, 12:12 PM
hy guys the following code works



Ext.define('EaselWindow', {
extend: 'Ext.Window'

,html: '<canvas id="demoCanvas" width="500" height="300">'
+ 'alternate content'
+ '</canvas>'

,afterRender: function() {
this.callParent(arguments);

var stage = new createjs.Stage("demoCanvas");

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

stage.update();
}
});


Ext.create('EaselWindow', {
title: "Ext+Easel"
,width: 300
,height: 300
,autoShow: true
});



however this code doesn't and I don't understand why



Ext.onReady( function () {
Ext.define('EaselWindow', {
width: 500,
height: 500,
extend: 'Ext.Window'

,html: '<canvas id="demoCanvas" width="500" height="500">'
+ 'alternate content'
+ '</canvas>'

,afterRender: function() {
this.callParent(arguments);




var stage = new createjs.Stage("demoCanvas");
var myImage = new createjs.Bitmap("dbz.jpg");
stage.addChild(myImage);
stage.update();

} // end after render func
}); // end define


Ext.create('EaselWindow', {
title: "Ext+Easel",
autoShow: true
}); //end easelwindow


});

Well, i am no pro on Canvas but this demonstration should perhaps provide some insight http://www.tutorialspark.com/html5/HTML5_Canvas_Pixel-Manipulation.php