I have a set containing image objects. Each object is cropped using the 'clip-rect' attribute.
when I transform the entire set
allframes.transform("t50,0")
all the images move 50 pixels to the right, but the clip-rect stays in place.
how can I get the clip-rect attributes to transform with the entire set?
I am working on this for hours and I am drawing blanks.
I did come up with an inefficient solution:
When I first create the images and crop them, I create rectangles with the attributes of the crop, and push them into the set. when I transform the set, the rectangles move too, and then I reset the attributes on the clip-rect so it matches the getBBox of the corresponding rectangles. it worked for a while but now the code became too complicated for that.
Is there any way to move 'clip-rect' relative to their position?
Here is an illustration of my problem:
http://jsfiddle.net/28Fcn/
the yellow square is the same size as the other squares but it is cropped.
when I transform the entire set, all the elements move but the crop stays in place.
click on the rectangles and see.
this is my solution which is not ideal
http://jsfiddle.net/PgK6w/
any ideas?
Related
(a) what I have, (b) what I get, (c) what I want
I have a simple vector graphic in Inkscape, which consists of a rectangle, filled points and stars. Since the axis ranges are not really nice (the height equals approximatly 3 times the width of the picture) for a publication, I want to rescale the picture. However, I do not have the raw data, such that I can plot it again. How can I rescale my graphic (see figure (a)), such that the x-range is more wide (see figure (c)) without getting distortions (see figure (b))? In the end I want to create a PDF file out of it.
Any ideas on that?
Thanks for your help.
You can try to do it in 2 steps, using the Object -> Transform tool (Shift-Ctrl-M).
First, select everything, and with the transform tool select the Scale tab, and scale horizontally by, say, 300%. All figures will be distorted.
Now, unselect the rectangle, and scale horizontally again by 33.3%, but first click on Apply to each object separately. This will undo the distortion (but not the translation) of each object.
Note that 300% followed by 33.3% should leave the individual objects with the same size.
Documentation here.
Using moveto and lineto to draw various lines on a window canvas...
What is the simplest way to determine at run-time if an object, like a bit map or a picture control is in "contact" (same x,y coordinates) with a line(s) that had been drawn with lineto on a window canvas?
A simple example would be a ball (bitmap or picture) "contacting" a drawn border and rebounding... What is the easiest way to know if "contact" occurs between the object, picture or bitmap and any line that exists on the window?
If I get it right you want collision detection/avoidance between circular object and line(s) while moving. There are more option to do this I know of...
Vector approach
you need to remember all the rendered stuff in vector form too so you need list of all rendered lines, objects etc ... Then for particular object loop through all the other ones and check for collision algebraically with vector math. Like detecting intersection between bounding boxes and then with particular line/polyline/polygon or what ever.
Raster approach
This is simpler to mplement and sometimes even faster but less acurate (only pixel precision). The idea is to clear object last position with background color. Then check all the pixels that would be rendered at new position and if no other than background color present then no colision occurs so you can render the pixels. If any non background color present then render the object on the original position again as collision occur.
You can also check between old and new position and place the object on first non collision position so you are closer to the edge...
This approach need fast pixel access otherwise it woul dbe too slow. Standard Canvas does not allow this without using BitBlt from GDI. Luckily VCL GRaphics::TBitmap has ScanLine[] property allowing direct pixel access without any performance hit if used right. See example of it in your other question I answered:
bitmap rotate using direct pixel access
accessing ScanLine[y][x] is as slow as Pixels[x][y] but you can store all the pointers to each line of bitmap once and then just use that instead which is the same as accessing your own 2D array. So you really need just bitmap->Height calls of ScanLine[y] for entire image rendering after any resize or assigment of bitmap...
If you got tile based scene you can use this approach on tiles instead of pixels something like this:
What is the best way to move an object on the screen? but it is in asm ...
Field approach
This one is also considered to be a vector approach but does not require collision checks. Instead each object creates repulsive force the bigger the closer you are to it which is added to the Newton/D'Alembert physics driving force. When coefficients set properly it will avoid collisions on its own. This is used also for automatic placement of items etc... for more info see:
How to implement a constraint solver for 2-D geometry?
Hybrid approach
You can combine any of the above approaches together to better suite your needs. For example see:
Path generation for non-intersecting disc movement on a plane
I created a flowchart in InkScape in which each shape is filled with a linear gradient.
Some shapes share the same gradient tones but when I created them via copy&past did not know that gradients could be transformed during edit, I thought that copy&pasting a shape simply copy the entire object and each colors.
Anyway, it resulted in shapes that changes background gradient during re-positioning. After several searches I discovered that this is caused by a wrong position of "Gradient Editor Tool" of each one. In other words I moved objects but start/end of each gradient remained in place.
Please, how to quickly reposition gradient direction/start/end of each shape, maybe centering it on each one? I would avoid to manually reposition each one...
Thanks
Inkscape provides a toggle button to move the gradients along with the objects.
Activating this button during any coying or moving carries the gradient with it to the new location. (Actually it copies the gradient.)
I am wondering if there is a vtk filter that replaces glyps (cone source) with a single vertex?
Here is the problem i am trying to solve. I have bunch of vector field data displayed using cone glyps. I am trying to pick a vector glyph and display vector values. I am using vtkCellPicker to pick the vector glyph. The cell picker is picking the face on the glyph instead of picking the whole glyph. So, the vector values picked are values on the face, not for the entire glyph.
If i can run the vtkData through some filter which replaces these glyps with a single vertex, i can pick the point and pick the correct vector field values.
Any help is appreciated.
You can use a vtkPolyDataConnectivityFilter (http://www.vtk.org/doc/nightly/html/classvtkPolyDataConnectivityFilter.html#details) to pull out the whole glyph starting from the one cell that is picked.
You may be better off setting GeneratePointIdsOn on your vtkGlyph3D filter which will add to the cone data an extra array with input point IDs. You can then use this to look up the original data value for display. See http://www.vtk.org/doc/nightly/html/classvtkGlyph3D.html#a1d7bfd7779ca2e229423a33a2e36e741
Using Raphael 2.0, I am trying to apply a transform to a set of objects in a way that is relative to all of the objects in the set. However, the effect I am getting is that the transform is applied to each item individually, irrespective of the other objects in the set.
For example: http://jsfiddle.net/tim_iles/VCca9/8/ - if you now uncomment the last line and run the code, each circle is scaled to 0.5x. The actual effect I am trying to achieve would be to scale the whole set of circles, so their relative distances are also scaled, which should put all four of them inside the bounding box of the white square.
Is there a way to achieve this using Raphael's built in tools?
When you scale, the first parameter is the X-scale. If you provide no other parameters, it will use that as the Y-scale, and scale around the center of the object.
When you scaled the rectangle, it scaled around the center of the rectangle. If you want the circles to scale around that point as well, rather than their centers, you should provide that point.
So the last line could be set.transform("s0.5,0.5,100,100"); (100,100 being the center of the rectangle you scaled)
At least, I think this is what you're asking for.