open pdf and draw c# : Add hyperlink to pdf in preview application SDK utility azure wpf web page visual studio %5BO%60Reilly%5D%20-%20JavaScript.%20The%20Definitive%20Guide,%206th%20ed.%20-%20%5BFlanagan%5D66-part1599

21.4.5  Drawing and Filling Curves
A path is a sequence of subpaths, and a subpath is a sequence of connected points. In
the paths we defined in §21.4.1, those points were connected with straight line seg-
ments, but that need not always be the case. The CanvasRenderingContext2D object
defines a number of methods that add a new point to the subpath and connect the
current point to that new point with a curve:
arc()
This method adds an arc to the current subpath. It connects the current point to
the beginning of the arc with a straight line, and then connects the beginning of
the arc to the end of the arc with a portion of a circle, leaving the end of the arc as
the new current point. The arc to be drawn is specified with six parameters: the X
and Y coordinates of the center of a circle, the radius of the circle, the start and end
angles of the arc, and the direction (clockwise or counterclockwise) of the arc be-
tween those two angles.
arcTo()
This method draws a straight line and a circular arc just like the 
arc()
method does,
but it specifies the arc to be drawn using different parameters. The arguments to
arcTo()
specify points P1 and P2 and a radius. The arc that is added to the path
has the specified radius and is tangent to the line between the current point and
P1 and also the line between P1 and P2. This unusual-seeming method of specifying
arcs is actually quite useful for drawing shapes with rounded corners. If you specify
a radius of 0, this method just draws a straight line from the current point to P1.
With a nonzero radius, however, it draws a straight line from the current point in
the direction of P1 then curves that line around in a circle until it is heading in the
direction of P2.
bezierCurveTo()
This method adds a new point P to the subpath and connects it to the current point
with a cubic Bezier curve. The shape of the curve is specified by two “control
points” C1 and C2. At the start of the curve (at the current point), the curve heads
in the direction of C1. At the end of the curve (at point P), the curve arrives from
the direction of C2. In between these  points  the direction of  the curve  varies
smoothly. The point P becomes the new current point for the subpath.
quadraticCurveTo()
This method is like 
bezierCurveTo()
, but it uses a quadratic Bezier curve instead
of a cubic Bezier curve and has only a single control point.
You can use these methods to draw paths like those in Figure 21-9.
21.4  Graphics in a <canvas> | 643
Client-Side
JavaScript
Add hyperlink to pdf in preview - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
adding hyperlinks to pdf documents; add url link to pdf
Add hyperlink to pdf in preview - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
add links to pdf file; add hyperlink pdf
Figure 21-9. Curved paths in a canvas
Example 21-7 shows the code used to create Figure 21-9. The methods demonstrated
in this code are some of the most complicated in the Canvas API; see the reference
section for complete details on the methods and their arguments.
Example 21-7. Adding curves to a path
// A utility function to convert angles from degrees to radians
function rads(x) { return Math.PI*x/180; }  
// Draw a circle. Scale and rotate if you want an ellipse instead.
// There is no current point, so draw just the circle with no straight
// line from the current point to the start of the circle.
c.beginPath();
c.arc(75,100,50,          // Center at (75,100), radius 50
0,rads(360),false); // Go clockwise from 0 to 360 degrees
// Draw a wedge. Angles are measured clockwise from the positive x axis.
// Note that arc() adds a line from the current point to the arc start.
c.moveTo(200, 100);       // Start at the center of the circle
c.arc(200, 100, 50,       // Circle center and radius
rads(-60), rads(0), // start at angle -60 and go to angle 0
false);             // false means clockwise
c.closePath();            // Add radius back to the center of the circle
// Same wedge, opposite direction
c.moveTo(325, 100);
c.arc(325, 100, 50, rads(-60), rads(0), true); // counterclockwise
c.closePath();
// Use arcTo() for rounded corners. Here we draw a square with
// upper left corner at (400,50) and corners of varying radii.
c.moveTo(450, 50);           // Begin in the middle of the top edge.
c.arcTo(500,50,500,150,30);  // Add part of top edge and upper right corner.
644 | Chapter 21: Scripted Media and Graphics
How to C#: Basic SDK Concept of XDoc.PowerPoint
Conversely, conversion from PDF to PowerPoint (.PPTX) is also supported. create, load, combine, and split PowerPoint file(s), and add, create, insert Hyperlink.
add a link to a pdf in preview; add hyperlinks pdf file
How to C#: Basic SDK Concept of XDoc.Word
Conversely, conversion from PDF to Word (.docx) is also supported you may easily create, load, combine, and split Word file(s), and add, create, insert Hyperlink.
add url to pdf; c# read pdf from url
c.arcTo(500,150,400,150,20); // Add right edge and lower right corner.
c.arcTo(400,150,400,50,10);  // Add bottom edge and lower left corner.
c.arcTo(400,50,500,50,0);    // Add left edge and upper left corner.
c.closePath();               // Close path to add the rest of the top edge.
// Quadratic Bezier curve: one control point
c.moveTo(75, 250);                      // Begin at (75,250)
c.quadraticCurveTo(100,200, 175, 250);  // Curve to (175,250)
c.fillRect(100-3,200-3,6,6);            // Mark the control point (100,200)
// Cubic Bezier curve
c.moveTo(200, 250);                       // Start at (200,250)
c.bezierCurveTo(220,220,280,280,300,250); // Curve to (300,250)
c.fillRect(220-3,220-3,6,6);              // Mark control points
c.fillRect(280-3,280-3,6,6);
// Define some graphics attributes and draw the curves
c.fillStyle = "#aaa";  // Gray fills
c.lineWidth = 5;       // 5-pixel black (by default) lines
c.fill();              // Fill the curves
c.stroke();            // Stroke their outlines
21.4.6  Rectangles
CanvasRenderingContext2D  defines  four  methods  for  drawing  rectangles. Exam-
ple 21-7 used one of them, 
fillRect()
, to mark the control points of the Bezier curves.
All four of these rectangle methods expect two arguments that specify one corner of
the rectangle followed by the rectangle width and height. Normally, you specify the
upper left corner and then pass a positive width and positive height, but you may also
specify other corners and pass negative dimensions.
fillRect()
fills the specified rectangle with the current 
fillStyle
strokeRect()
strokes
the outline of the specified rectangle using the current 
strokeStyle
and other line at-
tributes. 
clearRect()
is like 
fillRect()
, but it ignores the current fill style and fills the
rectangle with transparent black pixels (the default color of all blank canvases). The
important thing about these three methods is that they do not affect the current path
or the current point within that path.
The final rectangle method is named 
rect()
, and it does affect the current path: it adds
the specified rectangle, in a subpath of its own, to the path. Like other path-definition
methods, it does not fill or stroke anything itself.
21.4.7  Colors, Transparency, Gradients, and Patterns
The 
strokeStyle
and 
fillStyle
attributes specify how lines are stroked and regions are
filled. Most often, these attributes are used to specify opaque or translucent colors, but
you can also set them to CanvasPattern or CanvasGradient objects to stroke or fill with
a repeated background image or with a linear or radial color gradient. In addition, you
can set the 
globalAlpha
property to make everything you draw translucent.
21.4  Graphics in a <canvas> | 645
Client-Side
JavaScript
How to C#: Basic SDK Concept of XDoc.Excel
Conversely, conversion from PDF to Excel (.XLSX) is also supported. may easily create, load, combine, and split Excel file(s), and add, create, insert Hyperlink.
check links in pdf; add email link to pdf
To specify a solid color, use one of the color names defined by the HTML4 stand-
ard,
1
or use a CSS color string:
context.strokeStyle = "blue";   // Stroke lines in blue
context.fillStyle = "#aaa";     // Fill areas with light gray
The default value for both 
strokeStyle
and 
fillStyle
is “#000000”: opaque black.
Current browsers support CSS3 colors and allow the use of the RGB, RGBA, HSL, and
HSLA  color  spaces  in  addition  to  basic  hexadecimal  RGB  colors.  Here  are  some
examples:
var colors = [
"#f44",                       // Hexadecimal RGB value: red
"#44ff44",                    // Hexadecimal RRGGBB value: green
"rgb(60, 60, 255)",           // RGB as integers 0-255: blue
"rgb(100%, 25%, 100%)",       // RGB as percentages: purple
"rgba(100%, 25%, 100%, 0.5)", // RGB plus alpha 0-1: translucent purple
"rgba(0,0,0,0)",              // Completely transparent black
"transparent",                // Synonym for the above
"hsl(60, 100%, 50%)",         // Fully saturated yellow
"hsl(60, 75%, 50%)",          // Less saturated yellow
"hsl(60, 100%, 75%)",         // Fully saturated yellow, lighter
"hsl(60, 100%, 25%)",         // Fully saturated yellow, darker
"hsla(60, 100%, 50%, 0.5)",   // Fully saturated yellow, 50% opaque
];
The HSL color space defines a color with three numbers that specify its hue, saturation,
and lightness. Hue is an angle in degrees around a color wheel. A hue of 0 is red, 60 is
yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta, and 360 is back to red
again. Saturation describes the intensity of the color, and it is specified as a percentage.
Colors with 0 percent saturation are shades of gray. Lightness describes how light or
dark a color is and is also specified as a percentage. Any HSL color with 100 percent
lightness is pure white, and any color with 0 percent lightness is pure black. The HSLA
color space is just like HSL, but it adds an alpha value that ranges from 0.0 (transparent)
to 1.0 (opaque).
If you want to work with translucent colors, but do not want to explicitly specify an
alpha channel for each color, or if you want to add translucency to opaque images or
patterns (for example), you can set the 
globalAlpha
property. Every pixel you draw will
have its alpha value multiplied by 
globalAlpha
. The default is 1, which adds no trans-
parency. If you set 
globalAlpha
to 0, everything you draw will be fully transparent and
nothing will appear in the canvas. If you set this property to 0.5, pixels that would
otherwise have been opaque will be 50 percent opaque. And pixels that would have
been 50 percent opaque will be 25 percent opaque instead. If you set 
globalAlpha
, all
your pixels will be translucent and you may have to consider how those pixels are
combined (or “composited”) with the pixels they are drawn over—see §21.4.13 for
details about Canvas compositing modes.
1. Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow.
646 | Chapter 21: Scripted Media and Graphics
Instead of drawing with solid (but possibly translucent) colors, you can also use color
gradients and repeating images when filling and stroking paths. Figure 21-10 shows a
rectangle stroked with wide lines and a patterned stroke style on top of a linear gradient
fill and underneath a translucent radial gradient fill. The code fragments below show
how the pattern and gradients were created.
To fill or stroke using a background image pattern instead of a color, set 
fillStyle
or
strokeStyle
to the CanvasPattern object returned by the 
createPattern()
method of
the context object:
var image = document.getElementById("myimage");
c.fillStyle = c.createPattern(image, "repeat");
The first argument to 
createPattern()
specifies the image to use as the pattern. It must
be an 
<img>
<canvas>
, or 
<video>
element from the document (or an image object cre-
ated with the 
Image()
constructor). The second argument is typically “repeat” for a
repeating image fill that is independent of the size of the image, but you can also use
“repeat-x”, “repeat-y”, or “no-repeat”.
Note that you can use a 
<canvas>
element (even one that has never been added to the
document and is not visible) as the pattern source for another 
<canvas>
:
var offscreen = document.createElement("canvas");  // Create an offscreen canvas
offscreen.width = offscreen.height = 10;           // Set its size
offscreen.getContext("2d").strokeRect(0,0,6,6);    // Get its context and draw
var pattern = c.createPattern(offscreen,"repeat"); // And use it as a pattern
To fill (or stroke) with a color gradient, set 
fillStyle
(or 
strokeStyle
) to a Canvas-
Gradient object returned by the 
createLinearGradient()
or 
createRadialGradient()
methods of the context. Creating gradients is a multistep process, and using them is
trickier than using patterns.
The first step is to create the CanvasGradient object. The arguments to 
createLinear
Gradient()
are the coordinates of two points that define a line (it does not need to be
horizontal  or  vertical)  along  which  the  colors  will  vary.  The  arguments  to
createRadialGradient()
specify the centers and radii of two circles. (They need not be
concentric, but the first circle typically lies entirely inside the second.) Areas inside the
smaller circle or outside the larger will be filled with solid colors: areas between the two
will be filled with a color gradient.
After creating the CanvasGradient object and defining the regions of the canvas that
will be filled, you must define the gradient colors by calling the 
addColorStop()
method
of the CanvasGradient. The first argument to this method is a number between 0.0 and
1.0. The second argument is a CSS color specification. You must call this method at
least twice to define a simple color gradient, but you may call it more than that. The
color at 0.0 will appear at the start of the gradient, and the color at 1.0 will appear at
the end. If you specify additional colors, they will appear at the specified fractional
position within the gradient. Elsewhere, colors will be smoothly interpolated. Here are
some examples:
21.4  Graphics in a <canvas> | 647
Client-Side
JavaScript
// A linear gradient, diagonally across the canvas (assuming no transforms)
var bgfade = c.createLinearGradient(0,0,canvas.width,canvas.height);
bgfade.addColorStop(0.0, "#88f");  // Start with light blue in upper left
bgfade.addColorStop(1.0, "#fff");  // Fade to white in lower right
// A gradient between two concentric circles. Transparent in the middle
// fading to translucent gray and then back to transparent.
var peekhole = c.createRadialGradient(300,300,100, 300,300,300);
peekhole.addColorStop(0.0, "transparent");           // Transparent
peekhole.addColorStop(0.7, "rgba(100,100,100,.9)");  // Translucent gray
peekhole.addColorStop(1.0, "rgba(0,0,0,0)");         // Transparent again
An  important  point  to  understand  about  gradients  is  that  they  are  not  position-
independent. When you create a gradient, you specify bounds for the gradient. If you
then attempt to fill an area outside of those bounds, you’ll get the solid color defined
at one end or the other of the gradient. If you define a gradient along the line between
(0,0) and (100, 100), for example, you should only use that gradient to fill objects
located within the rectangle (0,0,100,100).
The  graphic shown in Figure 21-10  was  created  with  the 
pattern
pattern  and the
bgfade
and 
peekhole
gradients defined above using this code:
c.fillStyle = bgfade;           // Start with the linear gradient
c.fillRect(0,0,600,600);        // Fill the entire canvas
c.strokeStyle = pattern;        // Use the pattern for stroking lines
c.lineWidth = 100;              // Use really wide lines
c.strokeRect(100,100,400,400);  // Draw a big square
c.fillStyle = peekhole;         // Switch to the radial gradient
c.fillRect(0,0,600,600);        // Cover canvas with this translucent fill
21.4.8  Line Drawing Attributes
You’ve already seen the 
lineWidth
property, which specifies the width of the lines drawn
by 
stroke()
and 
strokeRect()
. In addition to 
lineWidth
(and 
strokeStyle
, of course),
there are three other graphics attributes that affect line drawing.
The default value of the 
lineWidth
property is 1, and you can set it to any positive
number, even fractional values less than 1. (Lines that are less than one pixel wide are
drawn with translucent colors, so they look less dark than 1-pixel-wide lines). To fully
understand the 
lineWidth
property, it is important to visualize paths as infinitely thin
one-dimensional lines. The lines and curves drawn by the 
stroke()
method are centered
over the path, with half of the 
lineWidth
on either side. If you’re stroking a closed path
and only want the line to appear outside the path, stroke the path first, and then fill
with an opaque color to hide the portion of the stroke that appears inside the path. Or
if you only want the line to appear inside a closed path, call the 
save()
and 
clip()
methods (§21.4.10) first, and then call 
stroke()
and 
restore()
.
Line widths are affected by the current transformation, as you may be able to make out
in the scaled axes of Figure 21-7. If you call 
scale(2,1)
to scale the X dimension and
leave Y unaffected, vertical lines will be twice as wide as horizontal lines drawn with
the same 
lineWidth
setting. It is important to understand that line width is determined
648 | Chapter 21: Scripted Media and Graphics
by the 
lineWidth
and the current transform at the time 
stroke()
is called, not at the
time that 
lineTo()
or another path-building method is called.
The other three line drawing attributes affect the appearance of the unconnected ends
of paths and the vertexes where two path segments meet. They have very little visual
impact for narrow lines, but they make a big difference when you are drawing with
wide lines. Two of these properties are illustrated in Figure 21-11. The figure shows
the path as a thin black line and the stroke as the gray area that surrounds it.
Figure 21-10. Pattern and gradient fills
21.4  Graphics in a <canvas> | 649
Client-Side
JavaScript
Figure 21-11. The lineCap and lineJoin attributes
The 
lineCap
property specifies how the ends of an open subpath are “capped.” The
value “butt” (the default) means that the line terminates abruptly at the end point. The
value “square” means that the line extends, by half of the line width, beyond the end-
point. And the value “round” means that the line is extended with a half circle (of radius
one-half the line width) beyond the endpoint.
The 
lineJoin
property specifies how the vertexes between subpath segments are con-
nected. The default value is “miter”, which means that the outside edges of the two
path segments are extended until they meet at a point. The value “round” means that
the vertex is rounded off, and the value “bevel” means that the vertex is cut off with a
straight line.
The final line drawing property is 
miterLimit
, which only applies when 
lineJoin
is
“miter”. When two lines meet at a sharp angle, the miter between them can become
quite long, and these long jagged miters are visually distracting. The 
miterLimit
prop-
erty places an upper bound on miter length. If the miter at a given vertex would be
longer than half of the line width times 
miterLimit
, that vertex will be drawn with a
beveled join instead of a mitered join.
21.4.9  Text
To draw text in a canvas, you normally use the 
fillText()
method, which draws text
using the color (or gradient or pattern) specified by the 
fillStyle
property. For special
effects at large text sizes, you can use 
strokeText()
to draw the outline of the individual
text glyphs (an example of outlined text appears in Figure 21-13). Both methods take
the text to be drawn as their first argument and take the X and Y coordinates of the text
as the second and third arguments. Neither method affects the current path or the
current  point.  As  you  can  see  in Figure 21-7,  text  is  affected  by  the  current
transformation.
The 
font
property specifies the font to be used for text drawing. The value should be
a string in the same syntax as the CSS 
font
attribute. Some examples:
"48pt sans-serif"
"bold 18px Times Roman"
"italic 12pt monospaced"
"bolder smaller serif"   // bolder and smaller than the font of the <canvas>
650 | Chapter 21: Scripted Media and Graphics
The 
textAlign
property specifies how the text should be horizontally aligned with re-
spect to the X coordinate passed  to 
fillText()
or 
strokeText()
. The 
textBaseline
property specifies how the text should be vertically aligned with respect to the Y coor-
dinate. Figure 21-12 illustrates the allowed values for these properties. The thin line
near each string of text is the baseline, and the small square marks the point 
(x,y)
that
was passed to 
fillText()
.
Figure 21-12. The textAlign and textBaseline properties
The default 
textAlign
is “start”. Note that for left-to-right text, an alignment of “start”
is the same as “left” and an alignment of “end” is the same as “right”. If you set the
dir
attribute of the 
<canvas>
element to “rtl” (right-to-left), however, “start” alignment
is the same and “right” alignment and “end” is the same as “left”.
The default 
textBaseline
is “alphabetic”, and it is appropriate for Latin and similar
scripts. The value “ideographic” is used with ideographic scripts such as Chinese and
Japanese. The value “hanging” is intended for use with Devangari and similar scripts
(which are used for many of the languages of India). The “top”, “middle”, and “bottom”
baselines are purely geometric baselines, based on the “em square” of the font.
fillText()
and 
strokeText()
take an optional fourth argument. If given, this argument
specifies the maximum width of the text to be displayed. If the text would be wider
than the specified value when drawn using the 
font
property, the canvas will make it
fit by scaling it or by using a narrower or smaller font.
If you need to measure text yourself before drawing it, pass it to the 
measureText()
method. This method returns a TextMetrics object that specifies the measurements of
the text when drawn with the current 
font
. At the time of this writing, the only “metric”
contained in the 
TextMetrics
object is the width. Query the on-screen width of a string
like this:
var width = c.measureText(text).width;
21.4  Graphics in a <canvas> | 651
Client-Side
JavaScript
21.4.10  Clipping
After defining a path, you usually call 
stroke()
or 
fill()
(or both). You can also call
the 
clip()
method to define a clipping region. Once a clipping region is defined, nothing
will be drawn outside of it. Figure 21-13 shows a complex drawing produced using
clipping regions. The vertical stripe running down the middle and the text along the
bottom of the figure were stroked with no clipping region and then filled after the
triangular clipping region was defined.
Figure 21-13. Unclipped strokes and clipped fills
Figure 21-13 was generated using the 
polygon()
method of Example 21-4 and the fol-
lowing code:
// Define some drawing attributes
c.font = "bold 60pt sans-serif";    // Big font
c.lineWidth = 2;                    // Narrow lines
c.strokeStyle = "#000";             // Black lines
// Outline a rectangle and some text
c.strokeRect(175, 25, 50, 325);     // A vertical stripe down the middle
c.strokeText("<canvas>", 15, 330);  // Note strokeText() instead of fillText()
// Define a complex path with an interior that is outside.
polygon(c,3,200,225,200);           // Large triangle
polygon(c,3,200,225,100,0,true);    // Smaller reverse triangle inside 
652 | Chapter 21: Scripted Media and Graphics
Download from Wow! eBook <www.wowebook.com>
Documents you may be interested
Documents you may be interested