將字符串轉換爲畫布繪製的參考點

Question

我想要將HTML5畫布中的簡單文本圖轉換爲繪圖座標。

說我有以下的文本圖，爲了假設的目的，讓我們想象這是存儲在一個Django模型的文本字段。

 1 
    2 
    3 L 4 
    5 6 7 
    8 

我想要的，是能夠得出這是到畫布上，用在什麼時候，每個號碼（或字母）是字符串中找出。空間也很重要。

我不知道從哪裏開始。

Answer 1

您將需要創建一個可用於使用CANVAS構建圖像的數據模型。一個這樣的模型是二維數組。

您可以編寫一個函數來解析文本區域，並使用每個元素的索引來定義其他元素的相對索引。這可以通過使用空字符串調用split並遍歷返回的數組來完成。您可以在迭代時跟蹤行號和列號。找到每個換行符（'\n'）後，可以將列計數重置爲0.

請注意，如果您希望具有包含不同字符的相對準確的文本區域圖像，則應使用等寬字體如Courier。

例如，假設下面的HTML頁面內容：

<textarea id="area" cols="40" rows="10" style="font-family:Courier;"> 
      0 
      0 
      0 
     0 0 0 
     0 0 0 
      0 0 
      0 
</textarea> 

<canvas id="canvas" width="400px" height="100px" style="border:1px solid #000000;"></canvas> 

這個例子使用的是普通HTML文本區域，而不是Django的，但它表明你的一般方法。

我們可以計算出二維數組假設文本區域一個新的生產線將在畫布圖像的新行：

var area = document.getElementById("area"); 
var text = area.textContent; 

var array = text.split(''); 

var row = 0; 
var col = 0; 
var colArray = []; 
var rowArray = []; 
for(var i=0; i<array.length; i++) 
{ 
    var c = array[i]; 
    if(c === '\n') 
    { 
     rowArray[row] = colArray; 
     colArray = []; 

     row++; 
     col = 0; 
    } 
    else 
    { 
     colArray[col] = c; 

     col++; 
    } 
} 

然後，您可以通過遍歷建立你的畫布圖像通過二維數組，其中x是x座標，y是y座標。

var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 
var r = 20; 
var xScale = 20; 
var yScale = 40; 
console.log(rowArray); 
for(y=0; y<rowArray.length; y++) 
{ 
    var row = rowArray[y]; 
    for(var x=0; x<row.length; x++) 
    { 
     var val = row[x]; 
     if(val != " ") 
     { 
      //Draw something at position [x,y] (or some transformation of it) 
      var xCoord = x * xScale; 
      var yCoord = y * yScale; 

      ctx.beginPath(); 
      ctx.arc(xCoord, yCoord, r, 0, 2 * Math.PI); 
      ctx.fillStyle = 'pink'; 
      ctx.fill(); 
      ctx.fillStyle = 'black'; 
      ctx.textAlign = 'center'; 
      ctx.fillText(val, xCoord, yCoord+5); 
      ctx.stroke(); 


     } 
    } 
} 

根據您希望顯示圖像的方式，您可能需要使用不同於CANVAS中y座標的變換。

你可以在JSFiddle中運行它來玩它。

編輯：添加文字填充以及。你可以玩弄地點。

編輯2：在圓圈內增加了中心文字定位。

Answer 2

考慮以下字符串：

raw_str = """\ 
    1 
    2 
    3 L 4 
    5 6 7 
    8""" 

您可以通過建立一個字符座標映射開始：

rows = s.split('\n') 
mapping = {} 
for y, r in enumerate(rows): 
    for x, c in enumerate(r): 
     if c != ' ': 
      mapping[c] = (x, y) 

BTW，映射建築部分也可以在一行中使用字典理解書面：

{c: (x, y) for y, r in enumerate(rows) for x, c in enumerate(r) if c != ' '} 

現在你應該得到這樣的映射：

{'1': (5, 0), 
'2': (5, 1), 
'3': (2, 2), 
'4': (8, 2), 
'5': (3, 3), 
'6': (5, 3), 
'7': (7, 3), 
'8': (5, 4), 
'L': (5, 2)} 

您可以使用JSON對其進行編碼，並將其作爲一些Javascript畫布繪製函數的輸入傳遞給前端。