Comments (2)
I got it, I got it!
By looking into the source code (we all love open source, don't we?) I realized, that my Image's container still had the size 0x0 (because the image had not been loaded before). Therefore, I just added a "toPreferredSize" after the image had been loaded...et voilà, "repaint" worked!
Thanks for...your patience!
Kind regards,
Andreas Rozek
from zebkit.
The problem browsers load images asynchronously. What can cause the size of the image is 0. There are few ways to avoid the issue:
- Images can be preloaded before you start building UI:
var staticImage1 = null, staticImage2, ...;
zebra.ready(function(path, result, image) {
staticImage1 = zebra.ui.loadImage("myimage1.jpg");
staticImage2 = zebra.ui.loadImage("myimage2.jpg");
...
},
// the code will be called only after images loading in method above
// is completed
function() {
// build zebra UI
// here it is guaranteed staticImage1 and staticImage2 are completely loaded
new zebra.ui.zCanvas().root.properties({
layout : new zebra.layout.FlowLayout(),
kids : [ new zebra.ui.ImagePan(staticImage1) ]
});
...
}
);
- You can use "zebra.ui.ImagePan". Pass path to image to the component. In this case the component itself will track the image loading to trigger invalidating and repainting:
// image panel will care about repainting and validation
var myImg = new zebra.ui.ImagePan("myimage.jpg");
...
- You can track image loading to initiates an appropriate component repainting in proper time:
var pan = new zebra.ui.ImagePan();
...
var img = zebra.ui.loadImage("myimage1", function(path, result, img) {
// image is loaded
pan.vrp(); // invalidate and repaint component
});
// here image still can have zero size since the image loading
// is not completed
pan.setImage(img);
...
from zebkit.
Related Issues (20)
- Rotation sample HOT 7
- Keyboard Event error when run in CEF framework HOT 2
- How to trigger the tree and Combo box selected event HOT 5
- How to refresh page after I have updated the UI component? HOT 7
- The zebkit canvas will block the html event.
- Calendar can't choose time, minute and second HOT 2
- ui.Lable and grid cells and captions alignment is changed in latest chrome HOT 9
- Is there a possibility to export hierarchy of UI components to ZSON? HOT 2
- INPUT fields: Unable to enter special / national characters HOT 2
- How to stop event in zebra?
- Does zebkit works with webpack?
- Error on display text, this is empty in Edge and Internet Explorer version 11-10
- Resizing the left caption of Grid
- When We create Object of new ui.zCanvas(element,width,height) except chrome other browser throw type undefine or null error. HOT 2
- Issue regarding margin left or padding left to label.
- HtmlTextField can't works in modal window HOT 1
- Future of Zebkit HOT 2
- HtmlElement Placed In ShaperPan Is Not Visible
- how can I change the text label of a button? HOT 4
- setFullSize causing an issue HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from zebkit.