I've created a line chart in Flex using LogAxis. Flex draws minor tick marks at the same location as the major tick marks for a Log axis, so I need to manually draw the minor tick marks.
I'm new to Flex, I've tried to do this using a CartesianDataCanvas inside backgroundElements in mxml, then using ActionScript to draw lines on the data canvas using moveTo(x1,y1) and lineTo(x2,y2), which draws a line between (x1,y1) and (x2,y2).
The problem with the above method is the tick mark length is a function of the chart area (which depends on the browser window size).
What I need is a method that:
(1) starts at a data coordinate (e.g. moveTo(x1,y1) works fine for this)
(2) draws a line to a screen coordinate (e.g. lineTo(x_screen, y_screen) where x_screen and y_screen are screen coordinates).
Is there anything that can accomplish this in Flex/AS3?
Alternatively, could I use screen coordinates for both steps above? If so, how to convert between screen and data coordinates? For example, is the upper right corner of the screen always a fixed data coordinate that I could reference is creating such a conversion?
Alternatively, could I save a five-pixel line in Illustrator and simply paste that image in the chart somehow? If so, how to paste it exactly at a data coordinate?
Any ideas or comments much appreciated.
I'd suggest you to create your custom axis renderer. Extend AxisRenderer class, override updateDisplayList method. Since all methods responsible for rendering axis are private, just copy them to your class and make needed changes to drawTicks method. But you'll need to spend some time understanding rendering logic.
Then apply your renderer to your chart.
<mx:LineChart>
<mx:horizontalAxisRenderers>
<custom:CustomAxisRenderer/>
</mx:horizontalAxisRenderers>
</mx:LineChart>
Related
I'm writing a 'template creation' app using the dcc.Graph image annotation features in Plotly Dash.
The user adds multiple rectangles for specific features in the image (an invoice) and my callback captures the coordinates of each rectangle via the relayoutData variable. I want to use a different color for each rectangle, but can't figure out how to do it.
It seems like the only way to change the newshapes fillcolor
property is to replace the whole figure, but then I lose all previous shapes
All and any help appreciated.
Andrew
I have just found the following demo that does exactly what I am trying to do:
https://dash-gallery.plotly.host/dash-image-annotation/
Now to unpack the logic and adapt it to my context ... Happy 2021!
Andrew
When you're using the Flash/Animate IDE and you select something on the stage with the Free Transform Tool, then move the transformation point (the white circle), what is it actually doing in frame script? DisplayObjects only have x and y properties, there's no transformX or transformY.
I have a MovieClip place on the stage through the Flash IDE with various transformations applied to it, and I would like to be able to replicate those in Actionscript.
When you're creating a display object in IDE, moving transformation point makes IDE move everything inside that object in reverse direction coordinates wise. It's like if you're moving a zero point of a local coordinates system, leaving everything else intact, the contents will then have their coordinates altered.
In order to simulate this behavior, you can nest your display object being created into a container sprite, then when your user drags transformation center, you move the wrapper sprite to the new coordinates and alter its nested object's ( the one with all the contents) coordinates by negative delta between old and new positions of virtual zero.
I have several images in my scene, I managed to make the zoom and pan work but the problem is, All of the images are zooming in at the same time. The scripts are place on each gameobject. I used gameobject for the images.
You need apply a filter so you just appli the transformations to one game object, since every one of them are GameObjects I recommend use raycast to sellect an object and then activate his Zoom.cs script just for this object.
I sugest to use just one Zoom.cs in the scene instead of every object having his own copy, then change your function to work with one game object as a paremeter and, when you touch your game object then that object will be the one to suffer the transformation.
If you doesn't want to implement a raycast or change your function at all, then you could set all the images inside a matrix, or use an index system, the central image, or the index you designed, will be the one to suffer the transformations. so you can scroll betwen your gaery and be sure that just the image that you designate in your matrix/index will be the choosen one. The trouble here is that you need to fully control the scroll animation so no one of the images will be in a wrong place like in between two index.
I am doing some math projects that require a lot of vector line art--that is a line drawn between to points with a circle at the start point and an arrow at the end point. A call to Math.atan2() keeps the arrow aligned. I call this class DrawVectorLineArt() and it creates instances of 2 other custom classes DrawArrow() and DrawCircle().
So far so good--DrawVectorLineArt() draws just what I need. Now I need to animate the vector art.
So in a function onEnterFrame I want to update the postion of arrow and circle, the objects created by DrawArrow() and DrawCircle(), respectively. I also need to clear and redraw the line drawn between them. At this point I am not sure how to proceed in an OOP framework. Do I need to create methods of my custorm class DrawVectorLineArt() to update the position of arrow and circle and subsequently clear and redraw the connecting line?
Any advice or links appreciated. Thanks!
"Do I need to create methods of my custorm class DrawVectorLineArt() to update the position of arrow and circle and subsequently clear and redraw the connecting line?"
Yes.
The arrow and the circle are very members of DrawVectorLineArt, and going by its name and choice of members, so should the line (if it's implemented through actual data). DrawVectorLineArt should contain and implement the whole animation between the circle, arrow, and line. As such, if the animation's supposed to be able to change after creation, the same instance of DrawVectorLineArt should be able to take any two legitimate points supplied to it (or that it becomes aware of internally, depending on what you're doing), reposition the three components, and turn the arrow and line appropriately, within its own code.
I working on HTML Canvas library to construct a "PIE Chart" Now to finish it I need the
given section of PIE Chart to Zoom or Slice once clicked on the section.
I almost done with the PIE Chart with the above exception only
Please do not recommend me to use any charting library available already
What you want cannot directly be done: when you draw on the canvas, you paint pixels that instantly dry onto the canvas. If you want to "zoom in" you'll have to erase the canvas (ctx.clearRect(...)) and re-paint your pie chart using more pixels. This is what a non-retained drawing mode (or immediate drawing mode) graphics API like Canvas requires.
Contrast this with SVG, a retained drawing mode graphics system, where the commands to draw content result in elements being created that you may track events for, adjust properties on, and see the visual results updated for you.
You can "zoom in"--redraw your pie chart larger--either by changing your drawing commands (bigger arc radius, lineWidth, etc.) or by transforming your context (changing the scale and translation) and then issuing the same drawing commands again.
There is also one non-option: if you leave the width and height attributes of the canvas unchanged but change the CSS to height and width properties you can 'zoom in' on your canvas without re-drawing. This is going to cause each virtual pixel on the canvas to grow on your screen, however, resulting in pixelation.