本文介绍了如何在画布上放置可移动和可调整大小的文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 下面我粘贴了工作代码。代码获取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 > < 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; //在单个画布上渲染所有页面 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); 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 runat = server > < div > < / div > < / form > < / 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> 解决方案 这篇关于如何在画布上放置可移动和可调整大小的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!