I have one problem with svg.
How can I rotate all the points while preserving the Text.
Loads points from the file as circles with labels.
How do I use this transformation:
transform = "translate (0,400)
transform = "scale (1, -1).
It spins my points, but unfortunately the text turns around. Can someone help me?
How did you fix the upside text problem ?:)
Related
For my specific purpose user draw rectangle annotation on web viewer and later on replace that with Free-Text in the place of Rectangle annotation.
As you can see in above image i have added one rectangle. Now i am using below code to replace that rect annot with free text.
$text = FreeText::Create($pdf->GetSDFDoc(), new Rect( 440.0, 581.89, 454.0, 781.89));
$text->SetContents("The quick brown fox - 2");
$text->SetTextColor(new ColorPt(0.0, 0.0, 0.0), 3);
$text->SetOpacity(1.0);
$text->RefreshAppearance();
$page->AnnotPushBack($text);
FYI - i am getting: 440.0, 581.89, 454.0, 781.89 from DB using GetRect() method. I have saved annotation in DB. As you can see in above image replaced text is sideways.
So how to fix font sideways issue if page is horizontal?
Annotations have rotation property. Rotation value is relative to documents upright position. In your case upright position of document is rotated counter clockwise 90 degrees.
So when you are creating your free text annotation you need to set rotation value correctly, I believe in your case it would be 270.
I am trying to rotate only the <g class="tick">'s labels of this D3 bar-chart but the whole axis rotates and ends-up looking like this:
I have tried:
A .attr("transform", "rotate(...)"): The whole axis rotates...
The same inside the line .selectAll(".tick"), which causes the labels to rotate along themselves but they get relocated to the corner of the graph, like this:
How can I rotate each element relative to its own position?
You want to set .attr("transform", "rotate(...)") for only text element not the entire tick.
I figured it out with this D3 block. I have updated the chart so the old one is no longer visible. The lines added that fix the problem have been commented with "Line added to fix rotation" just in case someone comes across the same issue.
Thanks #Daniel for pointing me out in the right direction.
The title basically outlines all the details of my problem. I'm trying to write text within a circle that curves with the outline of the circle. Something very similar to the image bellow.
You can actually do this with a little hack.
Here is how to proceed:
Get the offset to the x-center of each glyph in the text. This can be done by using the with of a PointText for the substring until the glyph.
Find the point for the offset on the path that you want your text to align to.
Place the single centered glyph at the just found point. Rotate the glyph by the path's tangent angle.
Here is the Paper Sketch: Align Text to Path Sketch
And here is the result of a simple test:
You can use the code with an arbitrary path, not only with circles.
I am trying to smoothen the transition from a diagonal line to a horizontal line by using arcs of circles that I calculate with a little calculus. The problem I am running into is that it seems as though I can't get the arcs to be positioned correctly.
For example: jsfiddle.net/5Wa9e/2
It might just be a problem with my calculations but from "inspection" it seems as though I have the right circles. I want the red points on the right to always be at the bottom of the circle at the point where the tangent is horizontal.
I am using: A#{radius},#{radius} 0 0 0 #{curveEndX},#{curveEndY}" to define the arc. Am I missing something?
--edit--
It was just my math. Turns out the arcs I see are just fallback mechanisms for when the SVG renderer can't find a circle matching my constraints.
--edit--
end result: jsfiddle.net/5Wa9e/2
What I'm trying to get done in the example shown below is a pie like shape for a preloader script. The deal with it is that it starts on 0% and finishes on 100%. Depending on the % given the circle behind the gray circle shall fill it self up.
Currently i have the shapes in 2 different canvas's as i had to use clip to actually hide parts of the circle. But as this applied to my overlay with the gray circle i spliced them up. They are by the way both images.
I would really appreciate any effort that you guys put in helping me.
Been trying to solve this issue for ages.
Found the solution.
Seems like i had to use the moveTo
function in order to get the shape to be painted correctly.
Using the
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}
function to use degrees rather than Radians.
-
Hope this helps someone else :)