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%5D65-part1598

The code above simply defines a path; it does not draw anything on the canvas. To
draw (or “stroke”) the two line segments in the path, call the 
stroke()
method, and to
fill the area defined by those line segments, call 
fill()
:
c.fill();             // Fill a triangular area
c.stroke();           // Stroke two sides of the triangle
The code above (along with some additional code to set line widths and fill colors)
produced the drawing shown in Figure 21-5.
Figure 21-5. A simple path, filled and stroked
Notice that the subpath defined above is “open”. It consists of just two line segments
and the end point is not connected back to the starting point. This means that it does
not enclose a region. The 
fill()
method fills open subpaths by acting as if a straight
line connected the last point in the subpath to the first point in the subpath. That is
why the code above fills a triangle, but strokes only two sides of the triangle.
If you wanted to stroke all three sides of the triangle above, you would call the 
close
Path()
method to connect the end point of the subpath to the start point. (You could
also call 
lineTo(100,100)
, but then you end up with three line segments that share a
start and end point but are not truly closed. When drawing with wide lines, the visual
results are better if you use 
closePath()
.)
There are two other important points to notice about 
stroke()
and 
fill()
. First, both
methods operate on all subpaths in the current path. Suppose we had added another
subpath in the code above:
c.moveTo(300,100);    // Begin a new subpath at (300,100);
c.lineTo(300,200);    // Draw a vertical line down to (300,200);
If we then called 
stroke()
, we would draw two connected edges of a triangle and a
disconnected vertical line.
The second point to note about 
stroke()
and 
fill()
is that neither one alters the current
path: you can call 
fill()
and the path will still be there when you call 
stroke()
. When
you are done with a path and want to begin another, you must remember to call
beginPath()
. If you don’t, you’ll end up adding new subpaths to the existing path and
you may end up drawing those old subpaths over and over again.
Example 21-4 defines a function for drawing regular polygons and demonstrates the
use of 
moveTo()
lineTo()
, and 
closePath()
for defining subpaths and of 
fill()
and
stroke()
for drawing those paths. It produces the drawing shown in Figure 21-6.
21.4  Graphics in a <canvas> | 633
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
pdf link; pdf link to email
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
clickable links in pdf; accessible links in pdf
Figure 21-6. Regular polygons
Example 21-4. Regular polygons with moveTo(), lineTo() and closePath()
// Define a regular polygon with n sides, centered at (x,y) with radius r.
// The vertices are equally spaced along the circumference of a circle.
// Put the first vertex straight up or at the specified angle.
// Rotate clockwise, unless the last argument is true.
function polygon(c,n,x,y,r,angle,counterclockwise) {
angle = angle || 0;
counterclockwise = counterclockwise || false;
c.moveTo(x + r*Math.sin(angle),  // Begin a new subpath at the first vertex
y - r*Math.cos(angle)); // Use trigonometry to compute position
var delta = 2*Math.PI/n;         // Angular distance between vertices
for(var i = 1; i < n; i++) {     // For each of the remaining vertices
angle += counterclockwise?-delta:delta; // Adjust angle
c.lineTo(x + r*Math.sin(angle),         // Add line to next vertex
y - r*Math.cos(angle));
}
c.closePath();                   // Connect last vertex back to the first
}
// Start a new path and add polygon subpaths
c.beginPath();
polygon(c, 3, 50, 70, 50);                   // Triangle
polygon(c, 4, 150, 60, 50, Math.PI/4);       // Square
polygon(c, 5, 255, 55, 50);                  // Pentagon
polygon(c, 6, 365, 53, 50, Math.PI/6);       // Hexagon
polygon(c, 4, 365, 53, 20, Math.PI/4, true); // Small square inside the hexagon
// Set some properties that control how the graphics will look
c.fillStyle = "#ccc";    // Light gray interiors
c.strokeStyle = "#008";  // outlined with dark blue lines
c.lineWidth = 5;         // five pixels wide.
// Now draw all the polygons (each in its own subpath) with these calls
c.fill();                // Fill the shapes
c.stroke();              // And stroke their outlines
634 | 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 links in pdf; add hyperlink in pdf
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.
pdf edit hyperlink; adding hyperlinks to a pdf
Notice that this example draws a hexagon with a square inside it. The square and the
hexagon are separate subpaths, but they overlap. When this happens (or when a single
subpath intersects itself), the canvas needs to be able to determine which regions are
inside the path and which are outside. The canvas uses a test known as the “nonzero
winding rule” to achieve this. In this case, the interior of the square is not filled because
the square and the hexagon were drawn in the opposite directions: the vertexes of the
hexagon were connected with line segments moving clockwise around the circle. The
vertexes of the square were connected counterclockwise. Had the square been drawn
clockwise as well, the call to 
fill()
would have filled the interior of the square as well.
The Nonzero Winding Rule
To test whether a point P is inside a path, using the nonzero winding rule, imagine a
ray drawn from P, in any direction, off to infinity (or, more practically, to some point
outside of the path’s bounding box). Now initialize a counter to zero and enumerate
all places where the path crosses the ray. Each time the path crosses the ray in a clock-
wise direction, add one to the count. Each time the path crosses the ray counterclock-
wise, subtract one from the count. If, after all crossings have been enumerated, the
count is nonzero, the point P is inside the path. If, on the other hand, the count is zero,
P is outside the path.
21.4.2  Graphics Attributes
Example 21-4 set the properties 
fillStyle
strokeStyle
, and 
lineWidth
on the context
object of the canvas. These properties are graphics attributes that specify the color to
be used by 
fill()
, the color to be used by 
stroke()
, and the width of the lines to be
drawn by 
stroke()
. Notice that these parameters are not passed to the 
fill()
and
stroke()
methods, but are instead part of the general graphics state of the canvas. If
you define a method that draws a shape and do not set these properties yourself, the
caller of your method can define the color of the shape by setting the 
strokeStyle
and
fillStyle
properties before calling your method. This separation of graphics state from
drawing commands is fundamental to the Canvas API and is akin to the separation
of presentation from content achieved by applying CSS stylesheets to HTML
documents.
The Canvas API defines 15 graphics attribute properties on the CanvasRender-
ingContext2D object. These properties are listed in Table 21-1 and explained in detail
in the relevant sections below.
21.4  Graphics in a <canvas> | 635
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.
adding links to pdf document; add link to pdf file
Table 21-1. Graphics attributes of the Canvas API
Property
Meaning
fillStyle
the color, gradient, or pattern for fills
font
the CSS font for text-drawing commands
globalAlpha
transparency to be added to all pixels drawn
globalCompositeOperation
how to combine new pixels with the ones underneath
lineCap
how the ends of lines are rendered
lineJoin
how vertexes are rendered
lineWidth
the width of stroked lines
miterLimit
maximum length of acute mitered vertexes
textAlign
horizontal alignment of text
textBaseline
vertical alignment of text
shadowBlur
how crisp or fuzzy shadows are
shadowColor
the color of drop shadows
shadowOffsetX
the horizontal offset of shadows
shadowOffsetY
the vertical offset of shadows
strokeStyle
the color, gradient, or pattern for lines
Since the Canvas API defines graphics attributes on the context object, you might be
tempted to call 
getContext()
multiple times to obtain multiple context objects. If you
could do this, you could define different attributes on each context: each context would
then be like a different brush and would paint with a different color or draw lines of
different widths. Unfortunately, you cannot use the canvas in this way. Each 
<can
vas>
element has only a single context object, and every call to 
getContext()
returns
the same CanvasRenderingContext2D object.
Although the Canvas API only allows you to define a single set of graphics attributes
at a time, it does allow you to save the current graphics state so that you can alter it
and then easily restore it later. The 
save()
method pushes the current graphics state
onto a stack of saved states. The 
restore()
method pops the stack and restores the most
recently saved state. All of the properties listed in Table 21-1 are part of the saved state,
as are the current transformation and clipping region (both are explained below). Im-
portantly, the currently defined path and the current point are not part of the graphics
state and cannot be saved and restored.
If you need more flexibility than a simple stack of graphics states allows, you may find
it helpful to define utility methods like the ones shown in Example 21-5.
636 | Chapter 21: Scripted Media and Graphics
Example 21-5. Graphics state management utilities
// Revert to the last saved graphics state, but don't pop the stack.
CanvasRenderingContext2D.prototype.revert = function() {
this.restore();  // Restore the old graphics state.
this.save();     // Save it again so we can go back to it.
return this;     // Allow method chaining.
};
// Set the graphics attributes specified by the properties of the object o.
// Or, if no argument is passed, return the current attributes as an object.
// Note that this does not handle the transformation or clipping region.
CanvasRenderingContext2D.prototype.attrs = function(o) {
if (o) {
for(var a in o)       // For each property in o
this[a] = o[a];   // Set it as a graphics attribute
return this;          // Enable method chaining
}
else return {
fillStyle: this.fillStyle, font: this.font,
globalAlpha: this.globalAlpha,
globalCompositeOperation: this.globalCompositeOperation,
lineCap: this.lineCap, lineJoin: this.lineJoin,
lineWidth: this.lineWidth, miterLimit: this.miterLimit,
textAlign: this.textAlign, textBaseline: this.textBaseline,
shadowBlur: this.shadowBlur, shadowColor: this.shadowColor,
shadowOffsetX: this.shadowOffsetX, shadowOffsetY: this.shadowOffsetY,
strokeStyle: this.strokeStyle
};
};
21.4.3  Canvas Dimensions and Coordinates
The 
width
and 
height
attributes of the 
<canvas>
element and the corresponding 
width
and 
height
properties of the Canvas object specify the dimensions of the canvas. The
default canvas coordinate system places the origin (0,0) at the upper left corner of the
canvas. X coordinates increase to the right and Y coordinates increase as you go down
the screen. Points on the canvas can be specified using floating-point values, and these
are not automatically rounded to integers—the Canvas uses anti-aliasing techniques
to simulate partially filled pixels.
The dimensions of a canvas are so fundamental that they cannot be altered without
completely resetting the canvas. Setting either the 
width
or 
height
properties of a Canvas
(even setting them to their current value) clears the canvas, erases the current path, and
resets all graphics attributes (including current transformation and clipping region) to
their original state.
Despite this fundamental importance of canvas dimensions, they do not necessarily
match either the on-screen size of the canvas or the number of pixels that make up the
canvas drawing surface. Canvas dimensions (and also the default coordinate system)
are measured in CSS pixels. CSS pixels are usually the same thing as regular pixels. On
high-resolution displays, however, implementations are allowed to map multiple
21.4  Graphics in a <canvas> | 637
Client-Side
JavaScript
device pixels to single CSS pixels. This means that the rectangle of pixels that the canvas
draws into may be larger than the canvas’s nominal dimensions. You need to be aware
of this when working with the pixel-manipulation features (see §21.4.14) of the canvas,
but the distinction between virtual CSS pixels and actual hardware pixels does not
otherwise have any effect on the canvas code you write.
By default, a 
<canvas>
is displayed on-screen at the size (in CSS pixels) specified by its
HTML 
width
and 
height
attributes. Like any HTML element, however, a 
<canvas>
element can have its on-screen size specified by CSS 
width
and 
height
style attributes.
If you specify an on-screen size that is different than the actual dimensions of the canvas,
the pixels of the canvas are automatically scaled as needed to fit the screen dimensions
specified by the CSS attributes. The on-screen size of the canvas does not affect the
number of CSS or hardware pixels reserved in the canvas bitmap and the scaling that
is done is an image scaling operation. If the on-screen dimensions are substantially
larger than the actual dimensions of the canvas, this results in pixelated graphics. This
is an issue for graphic designers and does not affect canvas programming.
21.4.4  Coordinate System Transforms
As noted above, the default coordinate system of a canvas places the origin in the upper
left corner, has X coordinates increasing to the right, and has Y coordinates increasing
downward. In this default system, the coordinates of a point map directly to a CSS pixel
(which then maps directly to one or more device pixels). Certain canvas operations and
attributes (such as extracting raw pixel values and setting shadow offsets) always use
this default coordinate system. In addition to the default coordinate system, however,
every canvas has a “current transformation matrix” as part of its graphics state. This
matrix defines the current coordinate system of the canvas. In most canvas operations,
when you specify the coordinates of a point, it is taken to be a point in the current
coordinate system, not in the default coordinate system. The current transformation
matrix is used to convert the coordinates you specified to the equivalent coordinates
in the default coordinate system.
The 
setTransform()
method allows you to set a canvas’s transformation matrix directly,
but coordinate system transformations are usually easier to specify as a sequence of
translations, rotations, and scaling operations. Figure 21-7 illustrates these operations
and their effect on the canvas coordinate system. The program that produced the figure
drew the same set of axes seven times in a row. The only thing that changed each time
was the current transform. Notice that the transforms affect the text as well as the lines
that are drawn.
The 
translate()
method simply moves the origin of the coordinate system left, right,
up, or down. The 
rotate()
method rotates the axes clockwise by the specified angle.
(The Canvas API always specifies angles in radians. To convert degrees to radians,
divide by 180 and multiply by 
Math.PI
.) The 
scale()
method stretches or contracts
distances along the X or Y axes.
638 | Chapter 21: Scripted Media and Graphics
Passing a negative scale factor to the 
scale()
method flips that axis across the origin,
as if it were reflected in a mirror. This is what was done in the lower left of Fig-
ure 21-7
translate()
was used to move the origin to the bottom left corner of the
canvas, and then 
scale()
was used to flip the Y axis around so that Y coordinates
increase as we go up the page. A flipped coordinate system like this is familiar from
algebra class and may be useful for plotting data points on charts. Note, however, that
it makes text difficult to read!
21.4.4.1  Understanding transformations mathematically
I find it easiest to understand transforms geometrically, thinking about 
translate()
,
rotate()
, and 
scale()
as transforming the axes of the coordinate system as illustrated
in Figure 21-7. It is also possible to understand transforms algebraically, as equations
Figure 21-7. Coordinate system transformations
21.4  Graphics in a <canvas> | 639
Client-Side
JavaScript
that map the coordinates of a point 
(x,y)
in the transformed coordinate system back
to the coordinates of the same point 
(x',y')
in the previous coordinate system.
The method call 
c.translate(dx,dy)
can be described with these equations:
x' = x + dx;  // An X coordinate of 0 in the new system is dx in the old
y' = y + dy;
Scaling operations have similarly simple equations. A call 
c.scale(sx,sy)
can be de-
scribed like this:
x' = sx * x;  
y' = sy * y;
Rotations are more complicated. The call 
c.rotate(a)
is described by these trigono-
metric equations:
x' = x * cos(a) - y * sin(a);
y' = y * cos(a) + x * sin(a);
Notice that the order of transformations matters. Suppose we start with the default
coordinate system of a canvas, and then translate it, and then scale it. In order to map
the point 
(x,y)
in the current coordinate system back to the point 
(x'',y'')
in the
default coordinate system, we must first apply the scaling equations to map the point
to an intermediate point 
(x', y')
in the translated but unscaled coordinate system,
and then use the translation equations to map from this intermediate point to
(x'',y'')
. The result is this:
x'' = sx*x + dx;
y'' = sy*y + dy;
If, on the other hand, we’d called 
scale()
before calling 
translate()
, the resulting
equations would be different:
x'' = sx*(x + dx);
y'' = sy*(y + dy);
The key thing to remember when thinking algebraically about sequences of transfor-
mations is that you must work backward from the last (most recent) transformation to
the first. When thinking geometrically about transformed axes, however, you work
forward from first transformation to last.
The transformations supported by the canvas are known as affine transforms. Affine
transforms may modify the distances between points and the angles between lines, but
parallel lines always remain parallel after an affine transformation—it is not possible,
for example, to specify a fish-eye lens distortion with an affine transform. An arbitrary
affine transform can be described by the six parameters 
a
through 
f
in these
equations:
x' = ax + cy + e
y' = bx + dy + f
You can apply an arbitrary transformation to the current coordinate system by passing
those six parameters to the 
transform()
method. Figure 21-7 illustrates two types of
640 | Chapter 21: Scripted Media and Graphics
transformations—shears and rotations about a specified point—that you can imple-
ment with the 
transform()
method like this:
// Shear transform:
//   x' = x + kx*y;
//   y' = y + ky*x;
function shear(c,kx,ky) { c.transform(1, ky, kx, 1, 0, 0); }
// Rotate theta radians clockwise around the point (x,y)
// This can also be accomplished with a translate,rotate,translate sequence
function rotateAbout(c,theta,x,y) {
var ct = Math.cos(theta), st = Math.sin(theta);
c.transform(ct, -st, st, ct, -x*ct-y*st+x, x*st-y*ct+y);
}
The 
setTransform()
method takes the same arguments as 
transform()
, but instead of
transforming the current coordinate system, it ignores the current system, transforms
the default coordinate system, and makes the result the new current coordinate system.
setTransform()
is useful to temporarily reset the canvas to its default coordinate system:
c.save();                      // Save current coordinate system
c.setTransform(1,0,0,1,0,0);   // Revert to the default coordinate system
// Perform operations using default CSS pixel coordinates
c.restore();                   // Restore the saved coordinate system
21.4.4.2  Transformation example
Example 21-6 demonstrates the power of coordinate system transformations by using
the 
translate()
rotate()
, and 
scale()
methods recursively to draw a Koch snowflake
fractal. The output of this example appears in Figure 21-8, which shows Koch snow-
flakes with 0, 1, 2, 3, and 4 levels of recursion.
Figure 21-8. Koch snowflakes
The code that produces these figures is elegant, but its use of recursive coordinate
system transformations makes it somewhat difficult to understand. Even if you don’t
follow all the nuances, note that the code includes only a single invocation of the
lineTo()
method. Every single line segment in Figure 21-8 is drawn like this:
c.lineTo(len, 0);
21.4  Graphics in a <canvas> | 641
Client-Side
JavaScript
The value of the variable 
len
does not change during the execution of the program, so
the position, orientation, and length of each of the line segments is determined by
translations, rotations, and scaling operations.
Example 21-6. A Koch snowflake with transformations
var deg = Math.PI/180;  // For converting degrees to radians
// Draw a level-n Koch Snowflake fractal on the canvas context c,
// with lower-left corner at (x,y) and side length len.
function snowflake(c, n, x, y, len) {
c.save();           // Save current transformation
c.translate(x,y);   // Translate origin to starting point
c.moveTo(0,0);      // Begin a new subpath at the new origin
leg(n);             // Draw the first leg of the snowflake
c.rotate(-120*deg); // Now rotate 120 degrees counterclockwise
leg(n);             // Draw the second leg
c.rotate(-120*deg); // Rotate again
leg(n);             // Draw the final leg
c.closePath();      // Close the subpath
c.restore();        // And restore original transformation
// Draw a single leg of a level-n Koch snowflake.
// This function leaves the current point at the end of the leg it has
// drawn and translates the coordinate system so the current point is (0,0).
// This means you can easily call rotate() after drawing a leg.
function leg(n) {
c.save();               // Save the current transformation
if (n == 0) {           // Nonrecursive case:
c.lineTo(len, 0);   //   Just draw a horizontal line
                      //                                       _  _
else {                  // Recursive case: draw 4 sub-legs like:  \/
c.scale(1/3,1/3);   // Sub-legs are 1/3rd the size of this leg
leg(n-1);           // Recurse for the first sub-leg
c.rotate(60*deg);   // Turn 60 degrees clockwise
leg(n-1);           // Second sub-leg
c.rotate(-120*deg); // Rotate 120 degrees back
leg(n-1);           // Third sub-leg
c.rotate(60*deg);   // Rotate back to our original heading
leg(n-1);           // Final sub-leg
}
c.restore();            // Restore the transformation
c.translate(len, 0);    // But translate to make end of leg (0,0)
}
}
snowflake(c,0,5,115,125);    // A level-0 snowflake is an equilateral triangle
snowflake(c,1,145,115,125);  // A level-1 snowflake is a 6-sided star
snowflake(c,2,285,115,125);  // etc.
snowflake(c,3,425,115,125);
snowflake(c,4,565,115,125);  // A level-4 snowflake looks like a snowflake!
c.stroke();                  // Stroke this very complicated path
642 | Chapter 21: Scripted Media and Graphics
Documents you may be interested
Documents you may be interested