資訊專欄INFORMATION COLUMN
摘要：原型要求要求制作一個邀請卡頁面，其中標(biāo)題字?jǐn)?shù)是動態(tài)的，最多可顯示行，如果超出行則第行內(nèi)容結(jié)尾添加省略號。根據(jù)產(chǎn)品妹子的性格，四行這個設(shè)置到時很大機會改，所以這里一定不能寫死，結(jié)果前幾天真的要求改成了最多可顯示行，其他照舊。
原型要求:
要求制作一個邀請卡頁面，其中標(biāo)題字?jǐn)?shù)是動態(tài)的，最多可顯示2行，如果超出2行則第2行內(nèi)容結(jié)尾添加省略號。根據(jù)產(chǎn)品妹子的性格，四行這個設(shè)置到時很大機會改，所以這里一定不能寫死，結(jié)果前幾天真的要求改成了最多可顯示4行 ，其他照舊。產(chǎn)品妹子too young ：）！
廢話不說，下面貼代碼，獻(xiàn)丑了！上代碼之前先看一下需要傳的參數(shù)！！
圖文并茂的參數(shù)說明，原諒我捉急的PS技術(shù)和設(shè)計ctx： 畫布的上下文環(huán)境
content： 需要繪制的文本內(nèi)容
drawX： 繪制文本的x坐標(biāo)
drawY： 繪制文本的y坐標(biāo)
lineHeight：文本之間的行高
lineMaxWidth：每行文本的最大寬度
lineNum：最多繪制的行數(shù)
// 文字自動換行
function textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
var drawTxt = ""; // 當(dāng)前繪制的內(nèi)容
var drawLine = 1; // 第幾行開始繪制
var drawIndex = 0; // 當(dāng)前繪制內(nèi)容的索引
// 判斷內(nèi)容是否可以一行繪制完畢
if(ctx.measureText(content).width <= lineMaxWidth) {
ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
} else {
for (var i = 0; i < content.length; i++) {
drawTxt += content[i];
if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
if (drawLine >= lineNum) {
ctx.fillText(content.substring(drawIndex, i) + "..", drawX, drawY);
break;
} else {
ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
drawIndex = i + 1;
drawLine += 1;
drawY += lineHeight;
drawTxt = "";
}
} else {
// 內(nèi)容繪制完畢，但是剩下的內(nèi)容寬度不到lineMaxWidth
if (i === content.length - 1) {
ctx.fillText(content.substring(drawIndex), drawX, drawY);
}
}
}
}
}
意外發(fā)現(xiàn)
在繪制文字的過程中發(fā)現(xiàn)，繪制文字的y坐標(biāo)是不是以文字上方做標(biāo)準(zhǔn)，一圖勝多言，上圖！
瀏覽器環(huán)境： chrome 71.0.3578.98（正式版本）（64 位）
字體大小為40px
繪制的y坐標(biāo)為0時，可以看到文本再左上角只漏了一點點出來 繪制的y坐標(biāo)為40時，可以看到文本可以完全顯示 后記這是一個比較冷門的代碼效果，但是也希望可以幫到有需要的朋友
如有幫助的請輕輕點下一個贊表示鼓勵！謝謝 ：）
如果看到這里首先很感謝花費您一些寶貴的時間看到這里，如有錯誤的地方希望各位大佬指出錯誤，謝謝：）
關(guān)閉手機鬧鐘，睡了！明天起來看 雷馬大戰(zhàn) ！哦吼
2019 coding and basketball!文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100970.html
摘要：將預(yù)覽的圖片上傳，后端生成，在管理系統(tǒng)中下載。技術(shù)要點文字排版設(shè)置指定背景顏色引入外部字體繪制文字圖片將生成的圖片轉(zhuǎn)成上傳這里根據(jù)后端協(xié)商，此處后端要求將圖片生成，并點擊批量下載實現(xiàn)步驟文字排版在一般容器中，如果要實現(xiàn)文字的排版很容易。 最近遇到一個業(yè)務(wù)需求，在小程序端定制預(yù)覽功能，并在預(yù)覽的圖片中使用指定的外部字體。將預(yù)覽的圖片上傳OSS，后端生成PDF，在管理系統(tǒng)中下載。但是………...
vue-canvas-poster vue 組件-簡單屬性畫 Canvas 圖github 概述 一個通過 css 屬性畫 canvas 圖片的輕量級的 vue 組件(A lightweight vue components use canvas draw image by css properties.) 具有如下特性： 繪制文本(換行、超出內(nèi)容省略號、中劃線、下劃線、文本加粗) 繪制圖片(圓...
摘要：新增的是個強大的功能，估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會很亂，所以對常用的畫圖繪制文字保存功能進(jìn)行了封裝，目前還比較滿意，能夠快速完成繪圖任務(wù)，從容應(yīng)對需求變更，只需進(jìn)行簡單配置即可。 Html5新增的canvas是個強大的功能， 估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會很亂，所以對canva...
閱讀 2000·2023-04-25 16:53
閱讀 1442·2021-10-13 09:39
閱讀 606·2021-09-08 09:35
閱讀 1639·2019-08-30 13:03
閱讀 2121·2019-08-30 11:06
閱讀 1831·2019-08-30 10:59
閱讀 3188·2019-08-29 17:00
閱讀 2288·2019-08-23 17:55
