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.
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 would like to create 'n' number of circles along a mouse created vector line when the mouse is clicked and dragged.
This would result in a row of circles which would be a certain distance apart, depending on the number of circles in the line. The first and last circles would be at the point where the mouse was first clicked and then released.
Example: If the line is 1000px long, and 3 circles are required there would be a circle at 0px 500px and 1000px. If the line is 1000px long and 5 circles are required, there would be a point at 0px, 250px, 500px, 750px and 1000px.
I had an attempt at paper.js with the following results, but this is not quite what I need. In this example, the circles follow a free path and are spaced by a set number of pixels.
Click here to see
As an extra, it would be nice to see the path of the mouse line before the mouse is released.
As #NicholasKyriakides wrote in his comment, this can be best implemented using a Path with getPointAt(offset).
I have implemented this in your code example and made it more generic, so you can use any path, not only a straight line.
I have also replaced your circle items with instances of SymbolItem, which is more efficient, because they share a lot of data.
Here is the Sketch
I am wondering if there's a way to access the Bounding Box Gui properties of mask shapes so that I can see how to create perfect circle shape masks in After Effects?
My code is below:
maskpath = app.project.item(1).layer("Orange Solid 2").property("ADBE Mask Parade").property("ADBE Mask Atom").property("ADBE Mask Shape");
Not sure what you mean by "access the Bounding Box Gui properties of mask shapes", but I do think I know what you mean by "how to create perfect circle shape masks in After Effects".
See D. Ebberts' script code posted here: http://aenhancers.com/viewtopic.php?f=11&t=2084
I believe it does (or will lead you to do) what you want.
I found the answer from After-Effects-CS6-Scripting-Guide.pdf page 48
AVLayer sourceRectAtTime() method
Retrieves the rectangle bounds of the layer at the specified time index, corrected for text or shape layer content.
Use, for example, to write text that is properly aligned to the baseline.
app.project.item(index).layer(index).sourceRectAtTime(timeT, extents)
Returns
A JavaScript object with four attributes: [top, left, width, height].
I think you are talking about how to access Left Top Right Bottom values of this window.
This window appears when you click on shape of mask path
(position where pointing hand drown blue color arrow)
please any one can tell me how to access those values via Script
Following is the code:http://pastie.org/8667271
This is how it looks like currently:http://tinypic.com/view.php?pic=coj7c&s=5#.UuQe5hA1iWg
Basically its the example code of zoom able Icicle.
I want to replace those rectangles in iccle with image in the rectangle shape.
Any suggestions on how to put image instead of rectangle or within the rectangle?
Thanks.
I'm using svg/d3 for creating a chart made of 'rect' elements.
What is the best way for adding a partical border/stroke for each rectangle (only on top of the rectangle)?
Thanks
I don't think SVG supports stroking only portions of a rectangle or path - stroke isn't like a CSS border. You're left with a few other options, all of which take some extra work:
Stroke the entire rect and apply a clipPath to remove the other three edges - probably works best if you make the rectangles bigger than necessary.
Apply a linear gradient fill to each rect, using the gradient definition to show a "border" at the top of the shape.
Add a separate line element to act as the border for each rect.
Use the stroke-dasharray property (docs) to set a dash definition where the "dash" only covers the top of the rect. This might be tricky to get right, but I suspect it wouldn't be too hard, as the stroke probably begins at the top left of the shape.