1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
    yerajeff is on a distinguished road

      0  

    Exclamation HTML 5 Canvas Click/touchstart Events Not Working in Android Browser in SenchT2B3 App

    HTML 5 Canvas Click/touchstart Events Not Working in Android Browser in SenchT2B3 App


    Version: Sencha Touch Beta3

    I'm building an application that uses the HTML5 canvas element for various parts of my application. I am tracking certain areas that are clicked based on X,Y coords and firing a function if the coords correspond to an array of rectangles that I have in the canvas. Everything works great in Chrome, but the canvas click event does not fire on my android browser while the canvas is embedded in my application. The event works fine when running on an HTML page standalone.

    I am using a Droid Bionic with Verizon's latest OTA update.

    Here is the view containing my canvas element:

    PHP Code:
    Ext.define('MyApp.view.Iforms.Form1.Form1', {
        
    extend'Ext.Container',
        
    config: {
            
    layout'card',
            
    items: [{
                    
    xtype 'mainmenutoolbar'
                
    },{
                    
    xtype'panel'
                    
    id'Form1MainPanelWrapper',                
                    
    scrollable: {
                        
    direction'vertical',
                        
    directionLocktrue
                    
    },
                    
    items: [{
                        
    xtype'panel',
                        
    layout'fit',
                        
    id'Form1MainPanel',
                        
    html'<canvas id="f1canvas"></canvas>'
                    
    }]
                }]
        },
        
    initialize: function() {
            
    this.callParent();
        }
    }); 
    I size the canvas dynamically based on the view-able area in my controller. The part of my controller that does the sizing, drawing and setting of the event looks like the following and is called after the view is painted:

    PHP Code:
    F1afterPaint: function() {
            
    console.log('form1 afterrender');


            
    Ext.getCmp('Form1MainPanelWrapper').on('resize'this.F1afterPaintthis);
            
            var 
    wrapperWidth Ext.getCmp('Form1MainPanel').element.getWidth();
            var 
    Yoffset Ext.getCmp('Form1MainPanel').element.getXY()[1];


            var 
    canvas document.getElementById("f1canvas");
            
            var 
    resizeRatio F1V1defaultHeight/F1V1defaultWidth;


            var 
    componentHeight resizeRatio*(wrapperWidth-(F1V1defaultPadding*resizeRatio));
            
            
    Ext.getCmp('Form1MainPanel').setHeight(componentHeight);


            
            
    canvas.setAttribute("width"wrapperWidth);
            
    canvas.setAttribute("height"componentHeight);
            var 
    ctx canvas.getContext("2d");
            
            
    this.semitruckv1(ctxwrapperWidth);


            var 
    rects this.generateCheckBoxes(ctxwrapperWidth);
            
            
    canvas.addEventListener('click', function(e) {
                
    e.preventDefault();
                
    alert('there was a touch');
                
    console.log('touchend: ' e.offsetX '/' e.offsetY);
                var 
    rect collides(rectse.offsetXe.offsetY);
                if (
    rect) {
                    
    console.log('collision: ' rect);
                    
    handleCollision(e.offsetX,e.offsetY);
                } else {
                    
    console.log('no collision');
                }
            }, 
    false);
            
            function 
    handleCollision(x,y) {
                var 
    Yoffset Ext.getCmp('Form1MainPanel').element.getXY()[1];
                
    y=y+Yoffset;
                
                var 
    rtScreenTracker x+120;
                if (
    rtScreenTracker >= wrapperWidth) {
                    
    console.log(rtScreenTracker);
                    
    x=x-120;
                }            


                
    overlay.setLeft(x);
                
    overlay.setTop(y);            
                
    overlay.show();
            }
            
            function 
    collides(rectsxy) {
                var 
    isCollision false;
                for (var 
    0len rects.lengthleni++) {
                    var 
    left rects[i].xright rects[i].x+rects[i].w;
                    var 
    top rects[i].ybottom rects[i].y+rects[i].h;
                    if (
    right >= x
                        
    && left <= x
                        
    && bottom >= y
                        
    && top <= y) {
                        
    isCollision rects[i].id;
                    }
                }
                
    localStorage.setItem("F1V1selectedCheck"isCollision);
                return 
    isCollision;
            }
        } 
    I even put the canvas directly into my index.html document. It appears above my app, and the click event still does not work, so my guess is touch2 is somehow interfering with canvas events. What is even odder, is that when I tap really fast with both thumbs on my phone, the onclick eventually gets called which I can see via the alert.

    Is there another way I should utilize the canvas in my app or is this infact a bug? I would assume any HTML5 elements would work inside of Sencha since it is based on HTML5 and Touch Charts use the canvas...

    Thanks in advance and please let me know if you need more information.

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Have you tried using tap/touchstart events? We do not support click or mouse events.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
    yerajeff is on a distinguished road

      0  

    Exclamation I have tried every touch event

    I have tried every touch event


    The click event works in the standalone canvas through the android browser, but yes, I've already tried tap, touchstart, touchend, mouseup, mousedown, click... nothing seems to work at all. I thought I had mentioned that in my post, but I must have accidentally erased in while I was adding formatting. So is this still a bug? I see that you migrated it.

  4. #4
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Can you post the code showing how you are using the tap events?

    Sencha Inc

    Jamie Avins

    @jamieavins

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
    yerajeff is on a distinguished road

      0  

    Default Listener Sample

    Listener Sample


    I add the event as seen in my code originally posted. Basically, after the view is painted, I call this code chunk in the corresponding function among other code...:

    PHP Code:
    var canvas document.getElementById("f1canvas");
            
    // .... other code
            
            
    canvas.addEventListener('touchstart', function(e) {
                
    e.preventDefault(); //added this but does not make a diff
                
    alert('there was a touch');
                
    console.log('touchevent: ' e.offsetX '/' e.offsetY);
                var 
    rect collides(rectse.offsetXe.offsetY);
                if (
    rect) {
                    
    console.log('collision: ' rect);
                    
    handleCollision(e.offsetX,e.offsetY);
                } else {
                    
    console.log('no collision');
                }
            }, 
    false); 
    You can see the other events called in my listener, but regardless I should see the alert on my device.

    If necessary I can PM you the URL and a login/pass to my app so you can view what I'm talking about. Let me know, I'm working all weekend, thank you so much in advance and if there is a bug here I'll be glad to contribute in any way.... thanks again!

  6. #6
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Here's a sample custom component that should get you started:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Canvas Test</title>
            <link rel="stylesheet" href="../../resources/css/sencha-touch.css"/>
            <script src="../../sencha-touch.js"></script>
            <style>
                .x-canvas {
                    height: 100%;
                    width: 100%;
                }
            </style>
    
            <script>
                Ext.define('Ext.myCanvas', {
                    extend: 'Ext.Component',
                    xtype: 'canvas',
                    template: [{
                        reference: 'canvas',
                        tag: 'canvas',
                        classList: [Ext.baseCSSPrefix + 'canvas']
                    }],
                    initialize: function() {
                        this.canvas.on({
                            tap: 'onCanvasTap',
                            scope: this
                        });
                    },
                    onCanvasTap: function(e) {
                        console.log(e);
                    }
                });
                Ext.setup({
                    onReady:function () {
                        Ext.Viewport.add({
                            xtype: 'canvas',
                            layout: 'fit'
                        })
                    }
                });
            </script>
        </head>
        <body></body>
    </html>
    Let me know how that goes. Might want to make that an alert instead of a log when you test on device

    Sencha Inc

    Jamie Avins

    @jamieavins

  7. #7
    Sencha User
    Join Date
    Mar 2010
    Posts
    33
    Vote Rating
    0
    yerajeff is on a distinguished road

      0  

    Default Problem Solved

    Problem Solved


    Thanks a ton Jamie, with a bit of tweaking for my specifications this solved my problem. I ran into a slight snag trying to grab coordinates while keeping cross browser compatibility between, Chrome, android browser and the iPhone browser. Due to the fact that my canvas is nested in a panel that will scroll vertically, I couldn't simply use e.pageY. I thought I would share my findings and solutions for a canvas in a scrolling panel, if anyone has created a better solution please feel free to share.

    Code:
    onCanvasTap: function(e) {        
            var xVal, yVal;
            if (e.pageX || e.pageY) {
                xVal = e.pageX;
                yVal = e.pageY;
            } else if (e.clientX || e.clientY)     {
                xVal = e.clientX + document.body.scrollLeft+document.documentElement.scrollLeft;
                yVal = e.clientY + document.body.scrollTop+document.documentElement.scrollTop;
            }        
            //compensate for any scroll offset
            //note that MyScrollingPanel is the panel containing the canvas
            yVal = yVal-Ext.getCmp('MyScrollingPanel').element.getXY()[1];
     
            console.log('coords: ' + xVal + '/' + yVal);
            
            //then I call other functions necessary for my app
        }

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar