itextsharp add annotation to existing pdf c# : Add hyperlink pdf file control SDK platform web page wpf asp.net web browser 1488-part1775

Figure 4-7. A canvas coordinates diagram on a canvas
Gradients
IE
a
Firefox
Safari
Chrome
Opera
iPhone
Android
Linear gradients
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
Radial gradients
·
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
aInternet Explorer support requires the third-party explorercanvas library.
Earlier in this chapter, you learned how to draw a rectangle filled with a solid color (see
“Simple  Shapes”  on  page  58), then a line stroked with a solid color (see
“Paths” on page 61). But shapes and lines aren’t limited to solid colors. You can do all
kinds of magic with gradients. Figure 4-8 shows an example.
The markup looks the same as any other canvas:
<canvas id="d" width="300" height="225"></canvas>
First, we need to find the 
<canvas>
element and its drawing context:
var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");
Gradients | 67
Download from Library of Wow! eBook <www.wowebook.com>
Add hyperlink pdf file - 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
chrome pdf from link; add hyperlinks to pdf
Add hyperlink pdf file - 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 link to pdf; adding links to pdf document
Figure 4-8. A left-to-right linear gradient
Once we have the drawing context, we can start to define a gradient. A gradient is a
smooth transition between two or more colors. The canvas drawing context supports
two types of gradients:
createLinearGradient(x0, y0, x1, y1)
paints along a line from 
(x0, y0)
to
(x1, y1)
.
createRadialGradient(x0, y0, r0, x1, y1, r1)
paints along a cone between two
circles. The first three parameters represent the starting circle, with origin 
(x0,
y0)
and radius 
r0
. The last three parameters represent the ending circle, with origin
(x1, y1)
and radius 
r1
.
Let’s make a linear gradient. Gradients can be any size, but we’ll make this gradient
300 pixels wide, like the canvas:
var my_gradient = context.createLinearGradient(0, 0, 300, 0);
Because the 
y
values (the second and fourth parameters) are both 
0
, this gradient will
shade evenly from left to right.
Once we have a gradient object, we can define the gradient’s colors. A gradient has two
or more color stops. Color stops can be anywhere along the gradient. To add a color
stop, you need to specify its position along the gradient. Gradient positions can be
anywhere between 0 and 1.
Let’s define a gradient that shades from black to white:
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
Defining a gradient doesn’t draw anything on the canvas. It’s just an object tucked away
in memory somewhere. To draw a gradient, you set your 
fillStyle
to the gradient and
draw a shape, like a rectangle or a line:
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
68 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
How to C#: Basic SDK Concept of XDoc.PDF for .NET
You may add PDF document protection functionality into your C# program. can edit PDF password and digital signature, and set PDF file permission Hyperlink Edit.
convert doc to pdf with hyperlinks; add links to pdf acrobat
VB.NET PDF: Basic SDK Concept of XDoc.PDF
You may add PDF document protection functionality into your VB.NET program. edit PDF password and digital signature, and set PDF file permission Hyperlink Edit.
add link to pdf acrobat; change link in pdf
Figure 4-9 shows the result.
Figure 4-9. A left-to-right linear gradient
Suppose you want a gradient that shades from top to bottom. When you create the
gradient object, keep the 
x
values (the first and third parameters) constant, and make
the 
y
values (the second and fourth parameters) range from 0 to the height of the canvas:
var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Figure 4-10 shows the result.
Figure 4-10. A top-to-bottom linear gradient
Gradients | 69
Download from Library of Wow! eBook <www.wowebook.com>
C# PDF Library SDK to view, edit, convert, process PDF file for C#
offers robust APIs for editing PDF document hyperlink (url) and SDK for .NET allows you to read, add, edit, update, and delete PDF file metadata, like
add links to pdf file; pdf edit hyperlink
VB.NET PDF Library SDK to view, edit, convert, process PDF file
RasterEdge PDF SDK for .NET package offers robust APIs for editing PDF document hyperlink (url), which provide quick access to the website or other file.
add a link to a pdf in acrobat; pdf reader link
You can also create gradients along a diagonal. For example:
var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Figure 4-11 shows the result.
Figure 4-11. A diagonal linear gradient
Images
IE
a
Firefox
Safari
Chrome
Opera
iPhone
Android
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
aInternet Explorer support requires the third-party explorercanvas library.
Figure 4-12 shows an image of a cat displayed with the 
<img>
element.
Figure 4-12. Cat with an <img> element
Figure 4-13 shows the same cat, drawn on a canvas.
70 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Change Excel hyperlink to PDF hyperlink and bookmark. VB.NET Demo Code for Converting Excel to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
pdf hyperlinks; add hyperlinks pdf file
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Change Word hyperlink to PDF hyperlink and bookmark. Add necessary references: The target resolution of the output tiff file, it is invalid for pdf file.
add a link to a pdf file; pdf link to attached file
Figure 4-13. Cat with a <canvas> element
The canvas drawing context defines several methods for drawing an image on a canvas:
drawImage(image, dx, dy)
takes an image and draws it on the canvas. The given
coordinates 
(dx, dy)
will be the upper-left corner of the image. Coordinates 
(0,
0)
would draw the image at the upper-left corner of the canvas.
drawImage(image, dx, dy, dw, dh)
takes an image, scales it to a width of 
dw
and a
height of 
dh
, and draws it on the canvas at coordinates 
(dx, dy)
.
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
takes an image, clips it to the
rectangle 
(sx, sy, sw, sh)
, scales it to dimensions 
(dw, dh)
, and draws it on the
canvas at coordinates 
(dx, dy)
.
The HTML5 specification explains the 
drawImage()
parameters:
The source rectangle is the rectangle [within the source image] whose corners are the
four points 
(sx, sy)
(sx+sw, sy)
(sx+sw, sy+sh)
(sx, sy+sh)
.
The destination rectangle is the rectangle [within the canvas] whose corners are the four
points 
(dx, dy)
(dx+dw, dy)
(dx+dw, dy+dh)
(dx, dy+dh)
.
Figure 4-14 gives a visual representation of these parameters.
To draw an image on a canvas, you need an image. The image can be an existing
<img>
element, or you can create an 
Image
object with JavaScript. Either way, you need
to ensure that the image is fully loaded before you can draw it on the canvas.
If you’re using an existing 
<img>
element, you can safely draw it on the canvas during
the 
window.onload
event:
<img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113">
<canvas id="e" width="177" height="113"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var cat = document.getElementById("cat");
context.drawImage(cat, 0, 0);
};
</script>
Images | 71
Download from Library of Wow! eBook <www.wowebook.com>
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Change Word hyperlink to PDF hyperlink and bookmark. VB.NET Demo Code for Converting Word to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
add links to pdf online; adding a link to a pdf
.NET PDF SDK - Description of All PDF Processing Control Feastures
Create signatures in existing PDF signature fields; Create signatures in new fields which hold the signature; Add signature image to PDF file. PDF Hyperlink Edit
pdf links; clickable links in pdf files
Figure 4-14. How drawImage() maps an image to a canvas
If you’re creating the image object entirely in JavaScript, you can safely draw the image
on the canvas during the 
Image.onload
event:
<canvas id="e" width="177" height="113"></canvas>
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var cat = new Image();
cat.src = "images/cat.png";
cat.onload = function() {
context.drawImage(cat, 0, 0);
};
</script>
The optional third and fourth parameters to the 
drawImage()
method control image
scaling. Figure 4-15 shows the same image of a cat, scaled to half its width and height
and drawn repeatedly at different coordinates within a single canvas:
Here is the script that produces the “multicat” effect:
cat.onload = function() {
for (var x = 0, y = 0;
x < 500 && y < 375;
x += 50, y += 37) {   
context.drawImage(cat, x, y, 88, 56);
72 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
}
};
All this effort raises a legitimate question: why would you want to draw an image on a
canvas in the first place? What does the extra complexity buy you over an 
<img>
element
and some CSS rules? Even the “multicat” effect could be replicated with 10 overlapping
<img>
elements.
The simple answer is that you’d do this for the same reason you might want to draw
text on a canvas (see “Text” on page 63). Our canvas coordinates diagram (see “Canvas
Coordinates” on page 60) included text, lines, and shapes; the text-on-a-canvas element
was just one part of a larger work. A more complex diagram could easily use
drawImage()
to include icons, sprites, or other graphics.
Figure 4-15. Multicat!
What About IE?
Microsoft Internet Explorer (up to and including Version 8, the current version at the
time of writing) does not support the canvas API. However, Internet Explorer does
support a Microsoft proprietary technology called VML, which can do many of the
same things as the 
<canvas>
element. And thus, excanvas.js was born.
What About IE? | 73
Download from Library of Wow! eBook <www.wowebook.com>
Download from Library of Wow! eBook 
<www.wowebook.com>
ExplorerCanvas—excanvas.js—is an open source, Apache-licensed JavaScript library
that implements the canvas API in Internet Explorer. To use it, include the following
<script>
element at the top of your page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML 5</title>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>
The 
<!--[if IE]>
and 
<![endif]-->
bits are conditional comments. Internet Explorer
interprets them like an 
if
statement: “if the current browser is any version of Internet
Explorer, then execute this block.” Every other browser will treat the entire block as
an HTML comment. The net result is that Internet Explorer will download the excan-
vas.js script and execute it, but other browsers will ignore the script altogether (not
download it, not execute it, not anything). This makes your page load faster in browsers
that implement the canvas API natively.
Once you’ve included the excanvas.js script in the 
<head>
of your page, you don’t need
to do anything else to accommodate Internet Explorer. You can just add 
<canvas>
ele-
ments to your markup, or create them dynamically with JavaScript. Follow the in-
structions in this chapter to get the drawing context of a 
<canvas>
element, and you can
draw shapes, text, and patterns.
Well...not quite. There are a few limitations:
• Gradients (see “Gradients” on page 67) can only be linear. Radial gradients are not
supported.
• Patterns must be repeating in both directions.
• Clipping regions are not supported.
• Nonuniform scaling does not correctly scale strokes.
• It’s slow. This should not come as a raging shock to anyone, since Internet Ex-
plorer’s JavaScript parser is slower than other browsers’ to begin with. When you
start drawing complex shapes via a JavaScript library that translates commands to
a completely different technology, things are going to get bogged down. You won’t
notice the performance degradation in simple examples like drawing a few lines
and transforming an image, but you’ll see it right away once you start doing canvas-
based animation and other crazy stuff.
74 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
There is one more caveat about using excanvas.js, and it’s a problem that I ran into
while creating the examples in this chapter. ExplorerCanvas initializes its own faux-
canvas interface automatically whenever you include the excanvas.js script in your
HTML page. But that doesn’t mean that Internet Explorer is ready to use it immediately.
In certain situations, you can run into a race condition where the faux-canvas interface
is almost, but not quite, ready to use. The primary symptom of this state is that Internet
Explorer will complain that “object doesn’t support this property or method” whenever
you try to do anything with a 
<canvas>
element, such as get its drawing context.
The easiest solution to this is to defer all of your canvas-related manipulation until after
the 
onload
event fires. This may take a while—if your page has a lot of images or videos,
they will delay the 
onload
event—but it will give ExplorerCanvas time to work its magic.
A Complete Example
Halma is a centuries-old board game. Many variations exist. In this example, I’ve cre-
ated a solitaire version of Halma with nine pieces on a 9 × 9 board. In the beginning of
the game, the pieces form a 3 × 3 square in the bottom-left corner of the board. The
object of the game is to move all the pieces so they form a 3 × 3 square in the upper-
right corner of the board, in the least possible number of moves.
There are two types of legal moves in Halma:
• Take a piece and move it to any adjacent empty square. An “empty” square is one
that does not currently have a piece in it. An “adjacent” square is immediately
north, south, east, west, northwest, northeast, southwest, or southeast of the
piece’s current position. (The board does not wrap around from one side to the
other. If a piece is in the leftmost column, it cannot move west, northwest, or
southwest. If a piece is in the bottommost row, it cannot move south, southeast,
or southwest.)
• Take a piece and hop over an adjacent piece, and possibly repeat. That is, if you
hop over an adjacent piece, then hop over another piece adjacent to your new
position, that counts as a single move. In fact, any number of hops still counts as
a single move. (Since the goal is to minimize the total number of moves, doing well
in Halma involves constructing, and then using, long chains of staggered pieces so
that other pieces can hop over them in long sequences.)
Figure 4-16 is a screenshot of the game itself; you can also play it online if you want to
poke at it with your browser’s developer tools.
So how does it work? I’m so glad you asked. I won’t show all the code here (you can
see it at http://diveintohtml5.org/examples/halma.js). I’ll skip over most of the gameplay
code itself, but I want to highlight a few parts of the code that deal with actually drawing
on the canvas and responding to mouse clicks on the 
<canvas>
element.
A Complete Example | 75
Download from Library of Wow! eBook <www.wowebook.com>
Figure 4-16. Starting position of a Halma game
During page load, we initialize the game by setting the dimensions of the 
<canvas>
itself
and storing a reference to its drawing context:
gCanvasElement.width = kPixelWidth;
gCanvasElement.height = kPixelHeight;
gDrawingContext = gCanvasElement.getContext("2d");
Then we do something you haven’t seen yet—we add an event listener to the
<canvas>
element to listen for click events:
gCanvasElement.addEventListener("click", halmaOnClick, false);
The 
halmaOnClick()
function gets called when the user clicks anywhere within the can-
vas. Its argument is a 
MouseEvent
object that contains information about where the user
clicked:
function halmaOnClick(e) {
var cell = getCursorPosition(e);
// the rest of this is just gameplay logic
for (var i = 0; i < gNumPieces; i++) {
76 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
Documents you may be interested
Documents you may be interested