已解決430363個問題，去搜搜看，總會有你想問的

three.js 添加svg貼圖問題

關注

首頁猿問 three.js 添加svg貼圖問題

three.js 添加svg貼圖問題

Html5 JavaScript JQuery

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

因為需要在three.js創建的平面上添加圖片，我運用了創建新的平面添加貼圖的方式，jpg和png都可以實現，但是項目需要用svg圖片，請問怎樣添加svg貼圖呢？

查看完整描述

1 回答

qq_非誠勿擾_3

TA貢獻37條經驗獲得超16個贊

可以試試將svg轉成圖片格式再用于貼圖，用js可以實現轉化

反對回復 2016-10-21

唐叔叔
我用了canvg，可以把svg轉成canvas再貼圖，但是沒效果，可能是我用法不對，你用過這個嗎？

回復 2016-10-26
qq_非誠勿擾_3
轉化成canvas之后應該還需要一個canvas -> 圖片的過程，這里有一個canvas轉圖片的函數，返回值是一個url，將這個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;

回復 2016-10-26
qq_非誠勿擾_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; } }

回復 2016-10-26

點擊展開后面1條

1 回答
1 關注
3605 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

three.js 添加svg貼圖問題

three.js 添加svg貼圖問題

1 回答

添加回答