Results 1 to 5 of 5

Thread: how to put an image onto a canvas inside an extjs form or window

  1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    5

    Default how to put an image onto a canvas inside an extjs form or window

    hy guys the following code works

    Code:
    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

    Code:
    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
    
    
    });

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    I've not worked with canvas much, but I used this tutorial and it seemed to work for me:
    http://www.html5canvastutorials.com/...canvas-images/

    Code:
    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
    });

  3. #3
    Sencha User
    Join Date
    Jul 2013
    Posts
    5

    Default

    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.

    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
    
    
    });

  4. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    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?

  5. #5

    Default Canvas

    Quote Originally Posted by ryankore View Post
    hy guys the following code works

    Code:
    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

    Code:
    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/H...nipulation.php

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •