首頁(yè) 猿問(wèn) three.js 添加svg貼圖問(wèn)題

three.js 添加svg貼圖問(wèn)題

Html5 JavaScript JQuery

唐叔叔 2016-10-13 17:27:41

因?yàn)樾枰趖hree.js創(chuàng)建的平面上添加圖片，我運(yùn)用了創(chuàng)建新的平面添加貼圖的方式，jpg和png都可以實(shí)現(xiàn)，但是項(xiàng)目需要用svg圖片，請(qǐng)問(wèn)怎樣添加svg貼圖呢？

查看完整描述

1 回答

qq_非誠(chéng)勿擾_3

TA貢獻(xiàn)37條經(jīng)驗(yàn) 獲得超16個(gè)贊

可以試試將svg轉(zhuǎn)成圖片格式再用于貼圖，用js可以實(shí)現(xiàn)轉(zhuǎn)化

反對(duì) 回復(fù) 2016-10-21

唐叔叔
我用了canvg，可以把svg轉(zhuǎn)成canvas再貼圖，但是沒(méi)效果，可能是我用法不對(duì)，你用過(guò)這個(gè)嗎？

回復(fù) 2016-10-26
qq_非誠(chéng)勿擾_3
轉(zhuǎn)化成canvas之后應(yīng)該還需要一個(gè)canvas -> 圖片的過(guò)程，這里有一個(gè)canvas轉(zhuǎn)圖片的函數(shù)，返回值是一個(gè)url，將這個(gè)url作為加載貼圖的路徑即可 function makeImage(str,width) { width = width || 450; var canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.width = width; canvas.height = width; var ctx = canvas.getContext("2d"); var strLenght = str.length; var start = 0, startX = 10, startY = 30, hasLine = true, lines = 1; while (hasLine) { while (startX < (width-17)) { var chart = str.substring(start, start + 1).split(" "); chart = unique(chart).join(""); if (/^[a-zA-Z\d]$/.test(chart)) { startX = startX + 8; } else if (!chart) { startX = startX + 6; } else if (/^[,\.;'\?!:`~&-_\/\\]$/.test(chart)) { startX = startX + 6; } else { startX = startX + 17; } start++; if (start > strLenght) { hasLine = false; break; } } startX = 10; startY = startY + 20; lines++; } canvas.height = (lines+1) * 20; start = 0; startX = 10; startY = 30; hasLine = true;

回復(fù) 2016-10-26
qq_非誠(chéng)勿擾_3
while (hasLine) { while (startX < (width-17)) { var chart = str.substring(start, start + 1).split(" "); chart = unique(chart).join(""); ctx.font = "16px 宋體"; ctx.fillText(chart, startX, startY); if (/^[a-zA-Z\d]$/.test(chart)) { startX = startX + 8; } else if (!chart) { startX = startX + 6; } else if (/^[,\.;'\?!:`~&-_\/\\]$/.test(chart)) { startX = startX + 6; } else { startX = startX + 17; } start++; if (start > strLenght) { hasLine = false; break; } } startX = 10; startY = startY + 20; } ctx.font = "bold 16px arial"; ctx.textAlign = 'right'; ctx.fillText(width, startY+5); var dataurl = canvas.toDataURL('image/png'); return dataurl; function unique(data){ data = data || []; var a = {}; for (var i=0; i<data.length; i++) { var v = data[i]; if (typeof(a[v]) == ''){ a[v] = 1; } }; data.length=0; for (var i in a){ data[data.length] = i; } return data; } }

回復(fù) 2016-10-26