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.
Related
Good day. There is a popular application http://github.com/sconsult/croppic. Project demo: http://www.croppic.net. I am trying to use variant Preload (in demo). If I drag image with rotation angle = 0 or 180, I can reach all areas of image (and see it in crop area).
If I drag image with rotation angle <> 90 (80, 120, etc.) - I have unreachable areas, which I can't drag in crop area with such rotation angle. But I need ability to drag all parts of resized and/or rotated image to the crop area. Can you help me to defeat this restriction or tell, where is it - java initDrag / onImgDrag, cropContainer, imgWrapper? I can't understand, where I can find restrictions/parameters/conditions, which define this behavior.
Illustration:
Or you can repeat my example on Croppic demo page.
You should read the code in the touchmove handler (Line 476).
The image is bound to the container and in the source the image position is reset to fit thouse boundaries every time you drag (starts at Line 489).
I'm making a 2d game using melonJS.
In my game, i have an arrow which rotate on its axis. This arrow is a png image. When i keep the left mouse button, the arrow needs to fill from yellow to red, from the base to the top. Here's an exemple :
The initial arrow is all light red, like the top of the example image. when i keep the button clicked, the arrow color should change from the bottom with a white line as a current position to the top.
How can i do this with javascript ? Is there any things embbeded in melonJS to handle this kind of trick ?
Since your question is text based rather than code based, I'll do the same.
Here is how to draw your rotated changing-gradient arrow
Clear the canvas with context.clearRect.
Rotation: Translate to your desired center-axis coordinate around which you want to rotate. Then Rotate to your desired angle. Transformations (context.translate & context.rotate) will actually rotate the canvas itself. That way all new drawings will be translated (moved) and rotated. Note: Existing pixels will be unaffected.
Drawing the arrow: Draw your arrow with path commands (beginPath, moveTo, lineTo, ... for each piece of the arrow). Since you have already done your transformations (translate & rotate), you don't need to try to rotate your arrow drawings.
Gradient fill for arrow: Create a linear gradient (context.createLinearGradient) that extends through your arrow drawings. Set color stops (context.addColorstop) to create your desired yellow & red gradient along your arrow. Use the gradient as your context.fillStyle and fill your arrow path with context.fill.
Using gradients for the white indicator line You can also use gradients to display your white indicator bar. To do this, draw your arrow and then overdraw with another gradient that is transparent at all places except your desired indicator percentage where it will be white.
var g=ctx.createLinearGradient(0,170,0,0);
g.addColorStop(pct-0.01,'transparent');
g.addColorStop(pct-0.01,'white');
g.addColorStop(pct+0.01,'white');
g.addColorStop(pct+0.01,'transparent');
ctx.fillStyle=g;
ctx.fill();
Always clean up! Undo your transformations. You can undo transformation by either (1) reissuing your transformation commands in reverse order and with negative arguments or (2) resetting every transformation to defaults by resetting the transformation matrix with context.setTransform(1,0,0,1,0,0).
Put your code into a requestAnimationFrame animation loop and change the angle and/or the gradient to meet your design needs.
You can layer two PNG files, one with the arrow, one with the stripe, and control the position of the white stripe that sits on top of the arrow. Canvas should enable that pretty easily by default, and even more so if you're using a library.
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 have problem with canvas createPattern. I have two boxes, both will move after pressing a keyarrow:
Example:
http://jsfiddle.net/wA73R/1/
The problem is that the box background filled by createPattern also is moving. How to avoid that? Is there any solution? The big box is only an example (drawImage is not the good solution for me, I need something that will repeat background image).
Thank you for help
The problem is that the box background filled by createPattern also is moving.
Actually your problem is that the background is not moving - it is static, while you are drawing your rectangle to different positions.
How to avoid that?
The pattern will always be drawn at the coordinate origin, whose actual position is defined by the current transformation. In future you will be able to transform the pattern itself with the setTransform method, but since that currently is not implemented anywhere you instead will have to change the global transformation matrix.
In your case it means, that instead of drawing your rectangle at x/y, you translate the whole context to x/y and draw your rectangle at 0/0 then:
ctx.fillStyle=pattern;
ctx.save();
ctx.translate(boxes[i].x - left , boxes[i].y);
ctx.fillRect(0, 0, boxes[i].width, boxes[i].height);
ctx.restore();
(updated demo)
I'm using canvas for a project and I have a number of elements that I'm skewing. I'm only skewing on the y value and just want to know what the new width of the image is after skewing (so I can align it with another canvas element). Check out the code below to see what I mean
ctx.save();
//skew the context
ctx.transform(1,0,1.3,0,0,0);
//draw two images with different heights/widths
ctx.drawImage(image,0,0,42,60);
ctx.drawImage(image,0,0,32,25);
The goal would be to know that the 42 by 60 image was now a X by 60 image so I could do some translating before drawing it at 0,0. It's easy enough to measure each image individually, but I have different skew values and heights/widths throughout the project that need to be align. Currently I use this code (works decently for images between 25 and 42 widths):
var skewModifier = imageWidth*(8/6)+(19/3);
var skewAmount = 1.3; //this is dynamic in my app
var width = (skewModifier*skewAmount)+imageWidth;
As images get wider though this formula quickly falls apart (I think it's a sloping formula not a straight value like this one). Any ideas on what canvas does for skews?
You should be able to derive it mathematically. I believe:
Math.atan(skewAmount) is the angle, in radians, that something is skewed with respect to the origin.
So 1.3 would skew the object by 0.915 radians or 52 degrees.
So here's a red unskewed object next to the same object skewed (painted green). So you have a right triangle:
We know the origin angle (0.915 rads) and we know the adjacent side length, which is 60 and 25 for your two images. (red's height).
The hypotenuse is the long side thats being skewed.
And the opposite side is the triangle bottom - how much its been skewed!
Tangent gets us opposite / adjacent if I recall, so for the first one:
tan(0.915) = opposite / 60, solving for the opposite in JavaScript code we have:
opposite = Math.tan(0.915)*60
So the bottom side of the skewed object starts about 77 pixels away from the origin. Lets check our work in the canvas:
http://jsfiddle.net/LBzUt/
Looks good to me!
The triangle in question of course is the canvas origin, that black dot I painted, and the bottom-left of the red rectangle, which is the original position that we're searching for before skewing.
That was a bit of a haphazard explanation. Any questions?
Taking Simon's fiddle example one step further, so you can simply enter the degrees:
Here's the fiddle
http://jsfiddle.net/LBzUt/33/