I have one left panel in which there are different shapes like start,end connectors..... when i drag line image inside canvas i want to draw line/connector between two shapes how would i do it
i am new to flex any help appreciated
Thanks
Sanil
Canvas has graphics property, which can be used to draw on:
var g:Graphics = canvas.graphics;
g.moveTo(10, 10);
g.lineTo(20, 10);
When shapes are moved, call g.clear() and draw lines with new coordinates. Reference: Graphics
Lines will appear under children of canvas. If you need to draw something over them, then you need something above your Canvas - maybe another Canvas positioned over first.
Related
I am trying to make a simple program in which I have added a qgraphics scene and in this I have added a QGraphicsRectItem. I have implemented mouse press event, paint event, bounding rect. Now I have drawn a point on one side of rectangle because there can be multiple rectangle I can drop on screen so just to differentiate between them of different color. Now I can move my rectangle inside graphics seen and can increase the size of rectangle by moving it's one side at a time. The problem that I am facing is when I trying to draw point on one side of rectangle at the time of moving it, it leaves traces on graphics scene. can I remove the ghost lines?
This happens either because your boundingRect method isn't correct, or because you forgot to call prepareGeometryChange before making changes that affect the boundingRect result. Your boundingRect needs to include space for line widths, for example; that's a common mistake.
I got the task to draw some points on a map. Wrote some code but currently every point I create via shapes will be added to the wrong position inside of my gridpane. Oh and I'm using JavaFX.
I added an imageView to the index 0,0 of my GridPane and every point is created through x and y position of the MouseEvent on the imageView.
After that I added the created point as a child of the GridPane and it's displayed at the center of the y-axis of the first grid.
Tried different things like anchorPanes and canvas but can't seem to get it working.
Code of my View:
http://pastebin.com/dCb7EN4d
Code of my Main:
http://pastebin.com/vp5tzxkG
I hope that's enough ^^'
pls help!
Greetings,
Ben
GridPane is a managed layout: it will position nodes that are added to it via the properties you set (using defaults if you don't set them). So when you add your circles to the grid pane, since you don't set any properties, it will place it in cell (0,0) and align it within that cell using default settings; i.e. it ignores the centerX and centerY properties.
What you should really do here is use a layout that does not manage the positioning of the nodes for you, such as a Pane (or possibly a Group). You can put the ImageView and the Circles in the pane, and then place the pane in the rest of your layout (in the scroll pane, I think).
The other option you have is to call setManaged(false) on the nodes you add to the GridPane in order to instruct the GridPane not to position them, though this feels like more of a workaround.
I dont know if I am using the correct term here. However this is what I am trying to achieve and I would like some suggestions on how I could achieve that. I want to have a circle with border visible. Now here is the hard part and something I dont even know how to start with. I want to manipulate the circle in such a way that the borders of the circle are visible and its center is not (i.e Pretty much that it has a hole in it and would show what ever is placed under it)I would then like to have another image placed under the circle such that only the part of the image that is under the transparent part of the circle is shown the parts outside the transparent boundary of the circle become invisible. Any suggestions on how I could achieve this. It seems that googling isnt helping me.
I would suggest the alternative way for unmasking a circular area of an image. You can specify the clip region - the area where you need to perform painting. For example:
[..]
QPainter painter(this);
// Sample circular area.
QRegion r(QRect(100, 100, 200, 200), QRegion::Ellipse);
painter.setClipRegion(r);
[..]
painter.drawImage(0, 0, image);
[..]
This will draw only those parts of your image that are inside of the circle with radius 200. All the rest pixels will be hidden.
You can handle mouse move event to move this "circle" over the image like a loupe.
UPDATE
Below is the sample code that generates an image with circular mask and insert it into the label:
QPixmap target(500, 500); // the size may vary
QPixmap source("image.png");
QPainter painter(&target);
QRegion r(QRect(100, 100, 200, 200), QRegion::Ellipse);
painter.setClipRegion(r);
painter.drawPixmap(0, 0, source);
QLabel l;
l.setPixmap(target);
l.show();
You might want to have a look at the Composition Example.
In short you could draw the first image and then use one of the Composition Modes to draw the second image on top (or the other way around). Make sure to convert the images to ARGB32 before using them.
To make the inner Part of the Circle transparent you can adjust the Alpha Channel accordingly.
Here is a small Example using Composition mode:
QPainter p(&imageCircle);
p.setCompositionMode(QPainter::CompositionMode_SourceOver);
p.drawImage(image);
p.end()
Here you can find the Qt Documentation of QPainter.
I want to draw on a Flex AreaChart. This AreaChart has an AnnotationElement that is an CartesianDataCanvas.
When I draw some items on this CartesianDataCanvas, the chart looks good when the item fits inside the chart.
But when I draw an item that is bigger than the chart, the chart automatically resize and try to fit my item inside the chart. I dont want my chart to resize automatically like that, but rather not showing the item part lay outside the chart. What should I do?
Thank you a lot,
Henry
what about scaling it manually?
before you draw it on the canvas, determine the sizes of AreaChart including width/percentWidth and same for height, and scale your graphics to fit the canvas/AreaChart.
If you want to do it right, research this canvas to next properties:
explicitMaxWidth and postLayoutTransformOffsets and this too setLayoutBoundsPosition () from documentation about AreaChart & CartesianDataCanvas
And let us know :)
I was just going through one code used to draw one chart. This code is written in the updateDisplayList function of the ItemRenderer of ColumnChart. I am not good at the graphics part of Flex. Can anybody please explain me what this code is doing? I can see the final output, but am not sure how is this achieved.
var rc:Rectangle = new Rectangle(0, 0, width , height);
var g:Graphics = graphics;
g.clear();
g.moveTo(rc.left,rc.top);
g.beginFill(fill);
g.lineTo(rc.right,rc.top);
g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);
g.endFill();
Regards, PK
That code is drawing a rectangle, albeit in a bit of a roundabout way.
The drawing api in flash uses a "draw head". I can't see any reason for using g instead of graphics other than to save some typing. g.clear() erases anything that has been drawn before.
g.moveTo(rc.left, rc.top) moves that into position, in this case the top left corner of the rectangle (0,0). g.beginFill(fill) starts a fill, nothing surprising there.
The g.lineTo(x, y) calls move the draw head around to the the four corners of the rectangle and finally g.endFill() completes the fill.
You can get the same result doing this:
graphics.clear();
graphics.beginFill(fill);
graphics.drawRect(0, 0, width , height);
// this last call is only needed if you're going to draw even more,
// if not you can omit that too
graphics.endFill();
It basically draws a rectangle.
//clear any existing drawings
g.clear();
Set the current drawing position to the top-left corner of the rectangle, which is 0, 0
g.moveTo(rc.left,rc.top);
//start filling with the color specified by `fill`
g.beginFill(fill);
Draw a line to top-right corner of the rectangle from the current location (which is top-left corner). The lineTo method updates the current location so that subsequent drawings start from the new point.
g.lineTo(rc.right,rc.top);
Draw the remaining sides of the rectangle:
g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);
//end the fill.
g.endFill();
Check out the livedocs page for Graphics class for more info.
All the visual components in Flex inherit directly/indirectly from the UIComponent class. The updateDisplayList method of UIComponent draws the object and/or sizes and positions its children. This is an advanced method that you might override when creating a subclass of UIComponent. When you override it in your child class, you should call super.updateDisplayList with the correct parameters to make sure that the base class components are properly updated.
Degrafa makes this kind of thing much easier.