改进画布上的绘画whatssap对话提琴html5 [英] Improving drawing whatssap conversation on canvas fiddle html5
本文介绍了改进画布上的绘画whatssap对话提琴html5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在画布上绘制WhatsApp对话
问题
1）我可以调整包含文本的矩形的大小，但不准确....这是第1步
这取决于行数这个文本有。我现在将它乘以一个预定义的因子，但这是一个默认设置的随机因子....此因子必须根据段落行号（或者其他因素，如font-size或font-family ..）
完成后，我会将它发布到GitHub上
这是我前进的工作小提琴 https://jsfiddle.net/vf8gvq7m/168 /
示例
var canvas = document.getElementById（'cv'）; ctx = canvas.getContext（'2d'）; //核心绘图functionvar drawMe = function（）{var img =的document.getElementById（ 'BG'）; canvas.width = 364; canvas.height = 900; ctx.clearRect（0，0，canvas.width，canvas.height）; ctx.drawImage（img，0，0，364，662，0，0，364,662）; ctx.fillStyle ='＃E1FFC7'; var rectHeight = 50; text = $（＃first_text）。val（）; var maxWidth = 230; var lineHeight = 15; var x = 20; var y = 40; var fontSize =9; var fontType =Arial; ctx.font = fontSize +'pt'+ fontType; const words = text.split（''）; const incrementFactor = 4; //它为每行添加4个像素rect paragraphCount = words.length //定义段落计数var newRectHeight = paragraphCount * incrementFactor; ctx.fillRect（10,20,250，newRectHeight）; ctx.fillStyle ='black'; drawWords（ctx，text，x，y，maxWidth，lineHeight，rectHeight，words）}函数wrapText（context，text，x，y，maxWidth，lineHeight，rectHeight）{var words = text.split（''）;返回单词}函数drawWords（上下文，文本，x，y，maxWidth，lineHeight，rectHeight，单词）{var line =''; lineCountList = []; for（var n = 0; n
canvas {margin：20px 40px;}
< script src =https：// ajax。 googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"> ;</script><p>洛雷姆ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum< / p> < input type =textid =first_text> < button id =resetInput> reset< / button>< canvas id =cv>< / canvas>< img id =bgsrc =https://cloud.githubusercontent.com /assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpgstyle =opacity：0;/>
解决方案
我建议为行数创建一个函数。并更新增量因子的像素因子
const incrementFactor = 30;
const maxLineLengthLine = 30; //每行最大长度字符数
const paragraphCount = lineCount（text.length，maxLineLengthLine）;
函数lineCount（charactersCount，maxLineLengthLine）{
maxLine = maxLine？maxLine：1;
charactersCount = charactersCount？ charactersCount：1;
return Math.ceil（charactersCount / maxLine）
}
请参阅
https://jsfiddle.net/vf8gvq7m/174/
I'm drawing a WhatsApp conversation on a canvas
PROBLEM
1) I'm able to resize the rectangle that contains the text, but not accurately....this is the step 1
It depends on the number of lines this text has. I'm currently multiplying it by a predefined factor but this is a random factor I set by default....this factor has to be calculated according to the paragraph lines number (or maybe other factors like font-size or font-family..)
Once I finish it I'll publish it on GitHub
this is a working fiddle of my advance https://jsfiddle.net/vf8gvq7m/168/
Example
var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
// core drawing function
var drawMe = function() {
var img = document.getElementById('bg');
canvas.width = 364;
canvas.height = 900;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, 364, 662, 0, 0, 364,662);
ctx.fillStyle = '#E1FFC7';
var rectHeight=50;
text = $("#first_text").val();
var maxWidth = 230;
var lineHeight = 15;
var x = 20;
var y = 40;
var fontSize ="9"; var fontType="Arial";
ctx.font = fontSize + 'pt '+fontType;
const words = text.split(' ');
const incrementFactor = 4; // it adds 4 pixels to rect for each line
const paragraphCount = words.length // Define the paragraph count
var newRectHeight = paragraphCount*incrementFactor;
ctx.fillRect(10,20,250,newRectHeight);
ctx.fillStyle = 'black';
drawWords(ctx, text, x, y, maxWidth, lineHeight,rectHeight,words)
}
function wrapText(context, text, x, y, maxWidth, lineHeight, rectHeight) {
var words = text.split(' ');
return words
}
function drawWords(context, text, x, y, maxWidth, lineHeight, rectHeight, words) {
var line = '';
lineCountList = [];
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
count= (n+10);
line = words[n] + ' ' + count + ' ';
y += lineHeight;
lineCountList.push((n+10));
}
else {
line = testLine;
count= (n+10);
lineCountList.push((n+10));
}
}
context.fillText(line, x, y);
rectHeight=rectHeight + lineHeight;
var classes = lineCountList.join(' ');
paraghraphCount= Math.floor(count/10);
// alert(paraghraphCount)
// alert(lineCountList)
}
$("#resetInput").on("click",function(){
$("#first_text").val("");
drawMe();
});
$("#first_text").on("change keypress keyup keydown click",function(){
drawMe();
});
drawMe();
canvas{
margin:20px 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<input type="text" id="first_text"> <button id="resetInput">reset</button>
<canvas id="cv"></canvas>
<img id="bg" src="https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg" style="opacity:0;"/>
解决方案
I suggest create a function for line count. And update de pixels factor of the incremental factor
const incrementFactor = 30;
const maxLineLengthLine = 30; //max length characters count per line
const paragraphCount = lineCount(text.length, maxLineLengthLine);
function lineCount(charactersCount, maxLineLengthLine){
maxLine = maxLine?maxLine:1;
charactersCount = charactersCount ? charactersCount:1;
return Math.ceil(charactersCount/maxLine)
}
see https://jsfiddle.net/vf8gvq7m/174/
这篇关于改进画布上的绘画whatssap对话提琴html5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
