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

Figure 21-1. A simple SVG graphic
When used with an 
<img>
or 
<object>
element, SVG is just another image format, and
it is not particularly interesting to JavaScript programmers. It is more useful to embed
SVG images directly within your documents, so they can be scripted. Since SVG is an
XML grammar, you can embed it within XHTML documents like this:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<!-- declare HTML as default namespace and SVG with "svg:" prefix -->
<body>
This is a red square: <svg:svg width="10" height="10">
<svg:rect x="0" y="0" width="10" height="10" fill="red"/>
</svg:svg>
This is a blue circle: <svg:svg width="10" height="10">
<svg:circle cx="5" cy="5" r="5" fill="blue"/>
</svg:svg>
</body>
</html>
21.3  SVG: Scalable Vector Graphics | 623
Client-Side
JavaScript
Add links to pdf document - 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 reader link; clickable pdf links
Add links to pdf document - 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
pdf hyperlinks; add links to pdf online
This technique works in all current browsers except IE. Figure 21-2 shows how Firefox
renders this XHTML document.
Figure 21-2. SVG graphics in an XHTML document
HTML5 minimizes the distinction between XML and HTML and allows SVG (and
MathML) markup to appear directly in HTML files, without namespace declarations
or tag prefixes:
<!DOCTYPE html>
<html>
<body>
This is a red square: <svg width="10" height="10"> 
<rect x="0" y="0" width="10" height="10" fill="red"/>
</svg>
This is a blue circle: <svg width="10" height="10">
<circle cx="5" cy="5" r="5" fill="blue"/>
</svg>
</body>
</html>
At the time of this writing, direct embedding of SVG into HTML works only in the very
newest browsers.
Since SVG is an XML grammar, drawing SVG graphics is simply a matter of using the
DOM to create appropriate XML elements. Example 21-2 is a listing of a 
pieChart()
function that creates the SVG elements to produce the pie chart shown in Figure 21-3.
624 | Chapter 21: Scripted Media and Graphics
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
converter toolkit SDK, preserves all the original anchors, links, bookmarks and Use C#.NET Demo Code to Convert PDF Document to HTML5 Add necessary references:
add hyperlink to pdf in; add hyperlink to pdf online
.NET PDF Document Viewing, Annotation, Conversion & Processing
edit, delete links. Form Process. Fill in form data programmatically. Read form data from PDF form file. Add, Update, Delete form fields programmatically. Document
convert a word document to pdf with hyperlinks; active links in pdf
Figure 21-3. An SVG pie chart built with JavaScript
Example 21-2. Drawing a pie chart with JavaScript and SVG
/**
* Create an <svg> element and draw a pie chart into it.
* Arguments:
*   data: an array of numbers to chart, one for each wedge of the pie.
*   width,height: the size of the SVG graphic, in pixels
*   cx, cy, r: the center and radius of the pie
*   colors: an array of HTML color strings, one for each wedge
*   labels: an array of labels to appear in the legend, one for each wedge
*   lx, ly: the upper-left corner of the chart legend
* Returns: 
*    An <svg> element that holds the pie chart.
*    The caller must insert the returned element into the document.
*/
function pieChart(data, width, height, cx, cy, r, colors, labels, lx, ly) {
// This is the XML namespace for svg elements
var svgns = "http://www.w3.org/2000/svg"; 
21.3  SVG: Scalable Vector Graphics | 625
Client-Side
JavaScript
VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.
Turn PDF images to HTML images in VB.NET. Embed PDF hyperlinks to HTML links in VB.NET. Convert PDF to HTML in VB.NET Demo Code. Add necessary references:
chrome pdf from link; adding a link to a pdf
How to C#: Basic SDK Concept of XDoc.PDF for .NET
You may add PDF document protection functionality into your C# program. to edit hyperlink of PDF document, including editing PDF url links and quick
adding links to pdf in preview; adding hyperlinks to pdf files
// Create the <svg> element, and specify pixel size and user coordinates
var chart = document.createElementNS(svgns, "svg:svg");
chart.setAttribute("width", width);
chart.setAttribute("height", height);
chart.setAttribute("viewBox", "0 0 " + width + " " + height);
// Add up the data values so we know how big the pie is
var total = 0;
for(var i = 0; i < data.length; i++) total += data[i];
// Now figure out how big each slice of pie is. Angles in radians.
var angles = []
for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2;
// Loop through each slice of pie.
startangle = 0;
for(var i = 0; i < data.length; i++) {
// This is where the wedge ends
var endangle = startangle + angles[i];
// Compute the two points where our wedge intersects the circle
// These formulas are chosen so that an angle of 0 is at 12 o'clock
// and positive angles increase clockwise.
var x1 = cx + r * Math.sin(startangle);
var y1 = cy - r * Math.cos(startangle);
var x2 = cx + r * Math.sin(endangle);
var y2 = cy - r * Math.cos(endangle);
// This is a flag for angles larger than than a half circle
// It is required by the SVG arc drawing component
var big = 0;
if (endangle - startangle > Math.PI) big = 1;
// We describe a wedge with an <svg:path> element
// Notice that we create this with createElementNS()
var path = document.createElementNS(svgns, "path");
// This string holds the path details
var d = "M " + cx + "," + cy +  // Start at circle center
" L " + x1 + "," + y1 +     // Draw line to (x1,y1)
" A " + r + "," + r +       // Draw an arc of radius r
" 0 " + big + " 1 " +       // Arc details...
x2 + "," + y2 +             // Arc goes to to (x2,y2)
" Z";                       // Close path back to (cx,cy)
// Now set attributes on the <svg:path> element
path.setAttribute("d", d);              // Set this path 
path.setAttribute("fill", colors[i]);   // Set wedge color
path.setAttribute("stroke", "black");   // Outline wedge in black
path.setAttribute("stroke-width", "2"); // 2 units thick
chart.appendChild(path);                // Add wedge to chart
// The next wedge begins where this one ends
startangle = endangle;
// Now draw a little matching square for the key
626 | Chapter 21: Scripted Media and Graphics
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
the original text style (including font, size, color, links and boldness). C#.NET DLLs and Demo Code: Convert PDF to Word Document in C# Add necessary references
change link in pdf; pdf links
C# Create PDF Library SDK to convert PDF from other file formats
PDF with a blank page, bookmarks, links, signatures, etc. a PDF document in C#.NET using this PDF document creating toolkit, if you need to add some text
add url pdf; add hyperlink to pdf acrobat
var icon = document.createElementNS(svgns, "rect");
icon.setAttribute("x", lx);             // Position the square
icon.setAttribute("y", ly + 30*i);
icon.setAttribute("width", 20);         // Size the square
icon.setAttribute("height", 20);
icon.setAttribute("fill", colors[i]);   // Same fill color as wedge
icon.setAttribute("stroke", "black");   // Same outline, too.
icon.setAttribute("stroke-width", "2");
chart.appendChild(icon);                // Add to the chart
// And add a label to the right of the rectangle
var label = document.createElementNS(svgns, "text");
label.setAttribute("x", lx + 30);       // Position the text
label.setAttribute("y", ly + 30*i + 18);
// Text style attributes could also be set via CSS
label.setAttribute("font-family", "sans-serif");
label.setAttribute("font-size", "16");
// Add a DOM text node to the <svg:text> element
label.appendChild(document.createTextNode(labels[i]));
chart.appendChild(label);               // Add text to the chart
}
return chart;
}
The code in Example 21-2 is relatively straightforward. There is a little math to convert
the data being charted into pie-wedge angles. The bulk of the example, however, is
DOM code that creates SVG elements and sets attributes on those elements. In order
to work with browsers that do not fully support HTML5, this example treats SVG
as  an  XML  grammar  and  uses  the  SVG  namespace  and  the  DOM  method
createElementNS()
instead of 
createElement()
.
The most opaque part of this example is the code that draws the actual pie wedges.
The element used to display each wedge is 
<svg:path>
. This SVG element describes
arbitrary shapes comprised of lines and curves. The shape description is specified by
the 
d
attribute of the 
<svg:path>
element. The value of this attribute uses a compact
grammar of letter codes and numbers that specify coordinates, angles, and other values.
The letter M, for example, means “move to” and is followed by X and Y coordinates.
The letter L means “line to” and draws a line from the current point to the coordinates
that follow it. This example also uses the letter A to draw an arc. This letter is followed
by seven numbers describing the arc. The precise details are not important here, but
you can look them up in the specification at http://www.w3.org/TR/SVG/.
Note that the 
pieChart()
function returns an 
<svg>
element that contains a description
of the pie chart, but it does not insert that element into the document. The caller is
expected to do that. The pie chart in Figure 21-3 was created using a file like this:
<html>
<head>
<script src="PieChart.js"></script>
</head>
<body onload="document.body.appendChild(
21.3  SVG: Scalable Vector Graphics | 627
Client-Side
JavaScript
C# Image: Tutorial for Document Management Using C#.NET Imaging
detailed C# tutorials on each part by following the links respectively. are dedicated to provide powerful & profession imaging controls, PDF document, image to
adding an email link to a pdf; add links to pdf in acrobat
VB.NET PDF: Basic SDK Concept of XDoc.PDF
You may add PDF document protection functionality into your VB.NET program. to edit hyperlink of PDF document, including editing PDF url links and quick
adding links to pdf; adding a link to a pdf in preview
pieChart([12, 23, 34, 45], 640, 400, 200, 200, 150, 
['red','blue','yellow','green'],
['North','South', 'East', 'West'], 400, 100));
">
</body>
</html>
Example 21-3 is another scripted SVG example: it uses SVG to display an analog clock.
(See Figure 21-4.) Rather than dynamically building the tree of SVG elements from
scratch, however, it starts with a static SVG image of a clock embedded in the HTML
page. This static graphic includes two SVG 
<line>
elements that represent the hour
hand and the minute hand. Both lines point straight up, and the static image displays
the time 12:00. To turn this image into a functioning clock, we use JavaScript to set a
transform
attribute on each of 
<line>
elements, rotating them by the appropriate angles
so that the clock displays the current time.
Figure 21-4. An SVG clock
Note that Example 21-3 embeds SVG markup directly into an HTML5 file and does
not use XML namespaces within an XHTML file. This means that as shown here it will
work only with browsers that support direct embedding of SVG. By converting the
HTML file to XHTML, however, this same technique works in older SVG-capable
browsers.
Example 21-3. Displaying the time by manipulating an SVG image
<!DOCTYPE HTML>
<html>
<head>
<title>Analog Clock</title>
<script>
function updateTime() { // Update the SVG clock graphic to show current time
var now = new Date();                       // Current time
var min = now.getMinutes();                 // Minutes
var hour = (now.getHours() % 12) + min/60;  // Fractional hours
var minangle = min*6;                       // 6 degrees per minute
var hourangle = hour*30;                    // 30 degrees per hour
628 | Chapter 21: Scripted Media and Graphics
// Get SVG elements for the hands of the clock
var minhand = document.getElementById("minutehand");
var hourhand = document.getElementById("hourhand");
// Set an SVG attribute on them to move them around the clock face
minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
// Update the clock again in 1 minute
setTimeout(updateTime, 60000);
}
</script>
<style>
/* These CSS styles all apply to the SVG elements defined below */
#clock {                          /* styles for everything in the clock */
stroke: black;                 /* black lines */
stroke-linecap: round;         /* with rounded ends */
fill: #eef;                    /* on a light blue gray background */
}
#face { stroke-width: 3px;}       /* clock face outline */
#ticks { stroke-width: 2; }       /* lines that mark each hour */
#hourhand {stroke-width: 5px;}    /* wide hour hand */
#minutehand {stroke-width: 3px;}  /* narrow minute hand */
#numbers {                        /* how to draw the numbers */
font-family: sans-serif; font-size: 7pt; font-weight: bold; 
text-anchor: middle; stroke: none; fill: black;
}
</style>
</head>
<body onload="updateTime()">
<!-- viewBox is coordinate system, width and height are on-screen size -->
<svg id="clock" viewBox="0 0 100 100" width="500" height="500"> 
<defs>   <!-- Define a filter for drop-shadows -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
<feOffset in="blur" dx="1" dy="1" result="shadow" />
<feMerge>
<feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/>
</feMerge>
</filter>
</defs>
<circle id="face" cx="50" cy="50" r="45"/>  <!-- the clock face -->
<g id="ticks">                              <!-- 12 hour tick marks -->
<line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
<line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>
<line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
<line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
<line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
<line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
<line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
<line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
<line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
<line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
</g>
21.3  SVG: Scalable Vector Graphics | 629
Client-Side
JavaScript
<g id="numbers">                     <!-- Number the cardinal directions-->
<text x="50" y="18">12</text><text x="85" y="53">3</text>
<text x="50" y="88">6</text><text x="15" y="53">9</text>
</g>
<!-- Draw hands pointing straight up. We rotate them in the code. -->
<g id="hands" filter="url(#shadow)"> <!-- Add shadows to the hands -->
<line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
<line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>
</g>
</svg>
</body>
</html>
21.4  Graphics in a <canvas>
The 
<canvas>
element has no appearance of its own but creates a drawing surface within
the document and exposes a powerful drawing API to client-side JavaScript. The canvas
element is standardized by HTML5 but has been around for longer than that. It was
introduced by Apple in Safari 1.3, and it has been supported by Firefox since version
1.5 and Opera since version 9. It is also supported in all versions of Chrome. The
<canvas>
element is not supported by IE before IE9, but it can be reasonably well emu-
lated in IE6, 7, and 8 using the open source ExplorerCanvas project at http://code.google
.com/p/explorercanvas/.
An important difference between the 
<canvas>
element and SVG is that with the canvas
you create drawings by calling methods and with SVG you create drawings by building
a tree of XML elements. These two approaches are equivalently powerful: either one
can be simulated with the other. On the surface, they are quite different, however, and
each has its strengths and weaknesses. An SVG drawing, for example, is easily edited
by removing  elements from its  description. To  remove  an  element from  the same
graphic in a 
<canvas>
, it is often necessary to erase the drawing and redraw it from
scratch. Since the Canvas drawing API is JavaScript-based and relatively compact (un-
like the SVG grammar), it is documented completely in this book. See 
Canvas
Canvas-
RenderingContext2D
, and related entries in the client-side reference section.
Most of the Canvas drawing API is defined not on the 
<canvas>
element itself, but
instead on a “drawing context” object obtained with the 
getContext()
method of the
canvas. Call 
getContext()
with the argument “2d” to obtain a CanvasRenderingCon-
text2D object that you can use to draw two-dimensional graphics into the canvas. It is
important to understand that the canvas element and its context object are two very
different objects. Because it has such a long class name, I do not often refer to the
CanvasRenderingContext2D object by name, instead simply calling it the “context
object”. Similarly, when I write about the “Canvas API,” I usually mean “the methods
of the CanvasRenderingContext2D object.”
630 | Chapter 21: Scripted Media and Graphics
3D Graphics in a Canvas
At the time of this writing, browser vendors are starting to implement a 3D graphics
API for the 
<canvas>
element. The API is known as WebGL, and it is a JavaScript binding
to the OpenGL standard API. To obtain a context object for 3D graphics, pass the string
“webgl” to the 
getContext()
method of the canvas. WebGL is a large, complicated, and
low-level API that is not documented in this book: web developers are more likely to
use utility libraries built on top of WebGL than to use the WebGL API directly.
As a simple example of the Canvas API, the following code draws a red square and blue
circle  into 
<canvas>
elements  to  produce  output  like  the  SVG  graphics  shown  in
Figure 21-2:
<body>
This is a red square: <canvas id="square" width=10 height=10></canvas>.
This is a blue circle: <canvas id="circle" width=10 height=10></canvas>.
<script>
var canvas = document.getElementById("square");  // Get first canvas element
var context = canvas.getContext("2d");           // Get 2D drawing context
context.fillStyle = "#f00";                      // Set fill color to red
context.fillRect(0,0,10,10);                     // Fill a square
canvas = document.getElementById("circle");      // Second canvas element
context = canvas.getContext("2d");               // Get its context
context.beginPath();                             // Begin a new "path"
context.arc(5, 5, 5, 0, 2*Math.PI, true);        // Add a circle to the path
context.fillStyle = "#00f";                      // Set blue fill color
context.fill();                                  // Fill the path
</script>
</body>
We’ve seen that SVG describes complex shapes as a “path” of lines and curves that can
be drawn or filled. The Canvas API also uses the notion of a path. Instead of describing
a path as a string of letters and numbers, a path is defined by a series of method calls,
such as the 
beginPath()
and 
arc()
invocations in the code above. Once a path is defined,
other methods, such as 
fill()
, operate on that path. Various properties of the context
object, such as 
fillStyle
, specify how these operations are performed. The subsections
that follow explain:
• How to define paths, how to draw or “stroke” the outline of a path, and how to
fill the interior of a path.
• How to set and query the graphics attributes of the canvas context object, and how
to save and restore the current state of those attributes.
• Canvas dimensions, the default canvas coordinate system, and how to transform
that coordinate system.
• The various curve-drawing methods defined by the Canvas API.
• Some special-purpose utility methods for drawing rectangles.
21.4  Graphics in a <canvas> | 631
Client-Side
JavaScript
• How to specify colors, work with transparency, and draw with color gradients and
repeating image patterns.
• The attributes that control line width and the appearance of line endpoints and
vertexes.
• How to draw text in a 
<canvas>
.
• How to “clip” graphics so that no drawing is done outside of a region you specify.
• How to add drop shadows to your graphics.
• How to draw (and optionally scale) images into a canvas, and how to extract the
contents of a canvas as an image.
• How to control the compositing process by which newly drawn (translucent) pixels
are combined with the existing pixels in the canvas.
• How to query and set the raw red, green, blue, and alpha (transparency) values of
the pixels in the canvas.
• How to determine whether a mouse event occurred above something you’ve drawn
in a canvas.
The section ends with a practical example that uses 
<canvas>
elements to render small
inline charts known as sparklines.
Much of the 
<canvas>
example code that follows operates on a variable 
c
. This variable
holds the CanvasRenderingContext2D object of the canvas, but the code to initialize
that variable is not typically shown. In order to make these examples run, you would
need to add HTML markup to define a canvas with appropriate 
width
and 
height
at-
tributes, and then add code like this to initialize the variable 
c
:
var canvas = document.getElementById("my_canvas_id");
var c = canvas.getContext('2d');
The figures that follow were all generated by JavaScript code drawing into a 
<canvas>
element—typically  into  a  large  offscreen  canvas  to produce  high-resolution  print-
quality graphics.
21.4.1  Drawing Lines and Filling Polygons
To draw lines on a canvas and to fill the areas enclosed by those lines, you begin by
defining a path. A path is a sequence of one or more subpaths. A subpath is a sequence
of two or more points connected by line segments (or, as we’ll see later, by curve seg-
ments). Begin a new path with the 
beginPath()
method. Begin a new subpath with the
moveTo()
method. Once  you have  established  the  starting  point of a subpath with
moveTo()
, you can connect that point to a new point with a straight line by calling
lineTo()
. The following code defines a path that includes two line segments:
c.beginPath();        // Start a new path
c.moveTo(100, 100);   // Begin a subpath at (100,100)
c.lineTo(200, 200);   // Add a line from (100,100) to (200,200)
c.lineTo(100, 200);   // Add a line from (200,200) to (100,200)
632 | Chapter 21: Scripted Media and Graphics
Documents you may be interested
Documents you may be interested