Redraw Canvas on resize of parent container

[Former Member]

Hi All,

I want to redraw canvas on page resize.

I have created sap.ui.core.HTML control who's content is one Canvas element. on afterRendering event i have draw canvas. which is working fine. I have set width to 100%(canvas) in CSS.
Problem is when user resize browser or switch from portrait to land scape mode the canvas context get shrink or streach. I want to redraw canvas on page resize. I tried follwoing but it didnt work

var html1 = new sap.ui.core.HTML("html1", {

  content:

                "<canvas id='myCanvas' class='test'></canvas>",

             afterRendering: oController.renderCanvas                    //Perfectly draw canvas base on current page size

  });

html1.attachEvent("onresize", html1, oController.someFunToReDrawCanvas,null); // did not get fired at all. Also tried with "resize" word

Please let me know where I have made mistake or is there any other way by which I can call redraw Canvas function of controller.

Message was edited by: Michael Appleby

[jmoors · Accepted solution]

Hi,

You can use sap.ui.core.ResizeHandler to handle the window resizing.

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.ResizeHandler

Regards,

Jason

[Former Member · Accepted solution]

Hi Jason,

Thanks. I have saw that. But I really not able to find how exactly I register that.
I tried following.

In View.js

html1.register(html1,oController.someFunToReDrawCanvas)

In Controller.js

someFunToReDrawCanvas: function (){console.log("Redrawing canvas")}

but it never log any thing when I re-size browser.
I also tried as

sap.ui.core.ResizeHandler.register(html1, oController.someFunToReDrawCanvas);

but no log was created.
Please let me know where I am going wrong.

[former_member182862 · Accepted solution]

HI Sanket

Here is a small example

-D

[Former Member · Accepted solution]

Thanks Dennis.

I hunted my error. I was trying to register re-size event in view init event which wont work as view is not yet created. But when I register it on controller onAfterRendering event it work perfectly.

Following is the code, that I have added in controller.js onAfterRendering Event

sap.ui.core.ResizeHandler.register(this.getView(), oController.someFunToReDrawCanvas);

Thanks once again Dennis and Jason.

[former_member182862]

FYI, There is no ways to attach listener to div (or any tags) resize. In Javascript, we can only attach handler to window resize.

And it is better to do what Jason has suggested.

Thanks

-D