如何在画布上放置可移动和可调整大小的文本 [英] How to place moveable and resizable text on over canvas
本文介绍了如何在画布上放置可移动和可调整大小的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面我粘贴了工作代码。代码获取pdf并将画布重新调整为该大小。
现在我想将文本放在可以移动并重新调整大小的同一画布上。放置文本和重新调整大小的代码在这里：http：//jsfiddle.net/palani/Cxgkz/任何人都可以合并代码并帮助我。
< ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN http：// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns = http://www.w3.org/1999/xhtml >
< head runat = server >
< title > < / title >
< script src = https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js >
< / script >
< / head >
< body < /温泉n> >
< canvas id = canvas style = border：1px solid black >
< span class =code-keyword>< / canvas >
< script >
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array（）;
var canvas = document.getElementById（'canvas'）;
var context = canvas.getContext（'2d'）;
var scale = 1.5;
var canvasWidth = 0;
var canvasHeight = 0;
var pageStarts = new Array（）;
pageStarts [0] = 0;
var url ='pdf / PRO1000093000.pdf';
alert（pageStarts）;
PDFJS.getDocument（url）.then（function getPdfHelloWorld（_pdf）{
pdf = _pdf;
//在单个画布上渲染所有页面
alert（pdf.numPages ）;
for（var i = 1; i < = pdf.numPages; i ++） {
pdf.getPage（i）.then（function getPage（page） {
var viewport = page.getViewport（scale）;
canvas.width = viewport.width; // 更改 canvas.width 和/或 canvas.height 自动清除 canvas
canvas.height = viewport.height;
page.render（{ canvasContext： context， viewport： viewport }）;
pages [i - 1] = context.getImageData（0， 0， canvas.width， canva s.height）;
< span class =code-attribute> if （canvas.width > canvasWidth）{//计算宽度最终显示画布
canvasWidth = canvas.width;
}
canvasHeight + = canvas.height; //计算最终显示画布的累计值
pageStarts [i] = pageStarts [i - 1] + canvas.height; //保存此页面的Y起始位置[i]
}）;
}
canvas.width = canvasWidth;
canvas.height = canvasHeight; //这会自动清除所有画布内容
alert（pages.length）;
for（var i = 0; i < pages.length; i ++） {
context.putImageData（pages [i]， 0， pageStarts [i]）;
}
}）;
< / script >
< / head >
< body >
< 表格 id = form1 < span class =code-attrib ute> runat = server >
< div >
< / div >
< / form >
< < span class =code-leadattribute> / body >
< / html >
解决方案
Below i have pasted working code. The code fetches a pdf and re sizes the canvas to that size.
Now i want to place text on the same canvas which can be moved and re sized. Code for placing text and re sizing is here : http://jsfiddle.net/palani/Cxgkz/ Can any one merge both the code and help me out.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src=https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js>
</script>
</head>
<body>
<canvas id="canvas" style="border:1px solid black">
</canvas>
<script>
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var scale = 1.5;
var canvasWidth = 0;
var canvasHeight = 0;
var pageStarts = new Array();
pageStarts[0] = 0;
var url = 'pdf/PRO1000093000.pdf';
alert(pageStarts);
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
pdf = _pdf;
//Render all the pages on a single canvas
alert(pdf.numPages);
for (var i = 1; i <= pdf.numPages; i++) {
pdf.getPage(i).then(function getPage(page) {
var viewport = page.getViewport(scale);
canvas.width = viewport.width; // changing canvas.width and/or canvas.height auto-clears the canvas
canvas.height = viewport.height;
page.render({ canvasContext: context, viewport: viewport });
pages[i - 1] = context.getImageData(0, 0, canvas.width, canvas.height);
if (canvas.width > canvasWidth) { // calculate the width of the final display canvas
canvasWidth = canvas.width;
}
canvasHeight += canvas.height; // calculate the accumulated with of the final display canvas
pageStarts[i] = pageStarts[i - 1] + canvas.height; // save the "Y" starting position of this pages[i]
});
}
canvas.width = canvasWidth;
canvas.height = canvasHeight; // this auto-clears all canvas contents
alert(pages.length);
for (var i = 0; i < pages.length; i++) {
context.putImageData(pages[i], 0, pageStarts[i]);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html> 解决方案
这篇关于如何在画布上放置可移动和可调整大小的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
