QML Canvas: How to use CanvasWindow and CanvasSize properly - qt

I have a qml canvas with many elements, and when I zoom in, the elements needs to redrawn, if the canvas size grows too much, the rendering is delayed and quite visible.
I couldnt use the canvassize, canvaswindow properly to render only part of the scene, didnt find any proper examples to use this.
Could some expert please guide me with very minimalistic code.
Also, I see that these properties are marked as not to be used in future, does anyone know what is it that replaces ?
Regards,
Indrajit

Related

QGraphicsView RubberBandDrag leaves artifacts

I have a QGraphicsView and a QGraphicsScene set up without any properties changed but
view->setDragMode(QGraphicsView::RubberBandDrag);
view->setRenderHint(QPainter::Antialiasing, true);
When dragging arround for a bit the RubberBandDrag leaves artifacts and the RubberBand itself is often rendered incorrectly, missing the sides:
Also other graphics items such as a regular QGraphicsRectItem leave these traces. I tried without the antialias but that seems to make it even worse.
Do I have to set specific properties of the view/scene such as disabling optimization flags?
Or is this just a bug of Qt? (I am using 5.9.2)
At least I couldn't find a report of this.
I had similar problem. After I play around these two calls, things got fixed.
QGraphicsView.setCacheMode(QGraphicsView::CacheBackground);
QGraphicsView.setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate);

Flex Spark TitleWindow bad redraw on dragging

I have a problem with redrawing in flex 4. I have a spark titleWindow, and if i drag it faster, it looks like it's mask is one frame late after the component.
it's easily visible with 1pixel thin border, because it becomes invisible even with slower movement.
You can try it here (what is not my page, but it's easier to show you here than uploading example):
http://flexponential.com/2010/01/10/resizable-titlewindow-in-flex-4/
If you move in direction up, you see disappearing top border. in another directions it's not that sensitive as it has wide shadow, and it's not very visible on shadow.
On my computer i see it on every spark TitleWindow i have found on google, although it's much less visible with less contrast skins, without borders or with shadows.
Do you see it there? i had never this problem with halo components. It's doing the same thing with different skins. I tried to delete masks from skin, cache component, skin even an application as bitmap with no success.
I also turned on redraw regions in flash player, and it looks like it's one frame late after titlewindow too.
Does anyone know why is it doing this or how can i prevent it?
Thank you
UPDATE:
no answers? really?
I have been facing the same problem and I was really pissed that I couldn't find any answer.
The problem with me was, that I tried to center the component "component.x = (parent.width - component.width) / 2" and then draw that component programatically. The problem was, that component.x is a Number which can lead to floating values like 10.5 or similar. And it looks like that bitmapFill function rounds floats DIFFERENTLY than drawRect function, which makes exactly the 1px line around the objects (but ONLY when parent.width is an odd number). Strange thing for me was, that I only called the Draw function once, but still this line keep recurring ...
Doing Math.floor(component.x) solved the issue.
P.S.: I think that you can also help your issue by setting cacheAsbitmap=true on the dragged object ...
Cheers,
Jan Prazma

Problem: CSS for a window of a web application

I’ve been stuck in the process of constructing a framework for a window to hold my web apps. With the help of JavaScript, the window will change its color, size, and position on the page. It is so much like GUI apps in Windows OS.
Borders must be custom, that is, they will change their color for that of the window, but will be shadowed a bit with opacity of about 50%.
The head must have the same color as the window do, but will have an image with some alpha channel value as a background. (That will polish up the head of the window.)
My problem consists in that my CSS for this challenge is sort of hard to manage via JS (dynamic part of the app). So, I am here to ask some help from CSS experts. If you know how to make CSS a snap, your help will be very much appreciated. As for now, I am frustrated to find no way to write a clean and simple code.
P.S. I am willing to support Internet Explorer 6, too.
Edited: Please, have a look at the visual representation of the problem: http://savepic.org/261861.jpg How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?
How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?
That "transparent borders" thing you mention is not entirely trivial, but definitely solvable. Now I'm still not entirely sure in what direction you are looking for help - how to structure CSS vs. JavaScript, or how to solve the specific problems you mention?
Either way, have you already looked at JQuery Dialog? It's a bit much for that single problem (having a window and resizing it) but it brings a full-blown API and templating system that has solved many cross-browser problems already.
If you don't want to utilize a framework, I would say don't worry too much about JavaScript accessibility. In essence, when you build clean CSS, you can access it well from JavaScript. A few thoughts on good CSS are in this question.

Flex Drag and resize

I need to draw Line, Circle, and rectangle by mouse drag on canvas and then i need to to move and resize the drawn shapes.
How i can perform this in flex as i am new on this platform.
Please suggest me the method or refer any example with source to make it understand to me.
Please Help.
Thanks in Advance.
There is no such native feature in Flex. But, there are a couple of options, commercial and not:
http://www.rogue-development.com/objectHandles.html (free)
http://www.flashcomguru.com/components/flex_whiteboard/whiteboard_demo/ (payed)
You can do it by hand, if you wish, it's not very hard. I advice you to use Degrafa (http://degrafa.org/) for the actual drawing since it is way easier than native drawing API and it is opensource.

Moving a Flex GUI window confused by underlying Papervision3D viewport

I'm developing a Flex 2 application, and I noticed that part of the library which is responsible for moving GUI windows (TitleWindows) around when you drag them with the mouse gets confused if there is a clickable (buttonMode = true) sprite beneath them. When I say confused, I mean that the window is moved around normally for a while, but then at some point "jumps" into the upper left corner of the flash app, and makes very minor movement there. Then at some other point it jumps back. It is more difficult to explain than to experience, so please go and see for yourself. Here's how to reproduce the problem:
Go to http://www.panocast.com
In the left sidebar, choose "Real Estate"
Just below the bottom right corner of the flash window, choose "high res" by clicking on the rightmost icon.
When (part of) the video loads, click on the staircase. A TitleWindow will pop up.
Try dragging it around the screen. When the mouse cursor is moved above one of the clickable areas (like the staircase), the window is misplaced.
(Sorry, but can't give you a direct link, part of the page is generated dynamically.)
(What's makes the problem even more interesting is that for me, in "low res" mode, the problem does not occur! There is very little difference between the various modes.) I would really appreciate if someone told me what was going on here and how it can be fixed.
I'm not sure if it matters, but the underlying sprite is actually not just plain sprite, rather it is a Papervision3D renderer object with some 3D elements in it. I'm telling this because it is possible that the incorrect mouse coordinates somehow come from the texture UV mapped on the clickable objects.
I've managed to replicate this on the low res mode as well, so I don't think it's related to the resolution.
This looks to be because the MouseEvent is being handled by the TitleWindow AND the Papervision3D window. Perhaps you need to force stopImmediatePropagation() on one or the other? Or maybe switch off the MouseEvent handling for the Pv3D window when the TitleWindow pops up?
That's a tough one to debug without some source; something's apparently calling either move() or setting x and y properties on that TitleWindow and scheduling it be moved.
When I first read the post, it "smelled" like maybe a rotation miscalculation somewhere (using Math.atan vs. Math.atan2 can sometimes have that kind of effect), so you're right, it could have something to do with PaperVision, assuming you're not using Math.atan or setting rotation properties yourself anywhere. Just thought I'd mention it, though it's probably not happening in your case. You never know, though. ;)
More likely the LayoutManager is moving the component in response to a property change on the component. The Flex docs explain that in addition to setting its x and y properties, and explicit calls to move(), a UIComponent's move event can also be triggered when any of the following other properties change:
minWidth
minHeight
maxWidth
maxHeight
explicitWidth
explicitHeight
PaperVision or no, maybe that info might help you isolate the source of the move. Good luck.
I got this figured out. Apparently, this is a Papervision3D problem. There is a class deep inside Papervision3D called VirtualMouse, which is supposed to generate MouseEvents programmatically. This happens, for example, when the user interacts with any of the interactive objects on stage, e.g., a Plane with an interactive material on it (as in my case).
The problem is that the x and y coordinates of the generated event represent texture UV coordinates (just as I suspected) and not real world screen coordinates. When a TitleWindow (or any Panel object) is dragged, a "mouseMove" handler (among others) is added to the SystemManager, which then uses the stageX and stageY properties of the event object to determine the new position of the window. Unfortunately for VirtualMouse's mouse events, these are invalid, since the original x,y coordinates, which are probably used to determine the global stage coordinates are, as I said, not screen coordinates.
Honestly, I'm still unsure whether the events dispatched by VirtualMouse are used anywhere within Papervision3D itself, or they are just offered for convenience, but they sure make it difficult to integrate a viewport into a Flex program. Assuming that such events aren't necessary for PV3D itself, there is a one-liner fix for my problem, which must be added right after the creation of the viewport:
viewport.interactiveSceneManager.virtualMouse.
disableEvent(MouseEvent.MOUSE_MOVE);
BTW., there was a very similar (or rather, as it turns out, the same) bug with dragging sliders, also fixed by this line.

Resources