如何更改字面畫布中的筆劃顏色

Question

我正在使用Literally Canvas窗口小部件，並且我想創建一個onclick函數，該函數在觸發時將更改已在canvas元素中繪製的顏色（strokeStyle）。我試着使用：

lc.ctx.canvas.strokeStyle="red"; 
lc.ctx.canvas.style.strokeStyle="red"; 
lc.ctx.strokeStyle = "red"; 

還有噸的其他對象和屬性的，我嘗試更多，但我似乎無法得到任何接近，我是即使是在正確的方向？我試過的唯一一件工作是使用lc.colors.primary = "red";。它將我的撫摸顏色改爲紅色，但沒有改變已經繪製的內容，這意味着我觸發了該功能並繪製，並且筆畫是紅色的，但是已經繪製的筆畫保持黑色。

Answer 1

使用Literally Canvas，您可以更改放置在畫布上的形狀的樣式。

您可以通過lc.shapes訪問shapes數組，獲取元素並更改其顏色，然後調用repaintAllLayers()。 repaintAllLayers()方法對於將更改重新繪製到畫布很重要。

不幸的是，每種形狀的顏色屬性都不同。矩形和圓形使用strokeColor，線條使用color和鉛筆線，您必須更改它的color屬性smoothedPoints。可能有其他形狀具有不同的顏色屬性。所以保持這個先發。

下面你可以找到一個演示行爲的代碼片段。因爲我沒有找到字面掃描的CDN，所以它不能完全工作 - 只能畫一條線，然後按下「測試」按鈕，線條會顯示爲紅色。

var lc = null; 
 

 
function test() { 
 
    for (var i=0; i<lc.shapes.length; i++) { 
 
     if (lc.shapes[i].hasOwnProperty('smoothedPoints')) { 
 
      // Pencil shapes 
 
      for (var j=0; j<lc.shapes[i].smoothedPoints.length; j++) { 
 
       lc.shapes[i].smoothedPoints[j].color = "red"; 
 
      } 
 
     } else if (lc.shapes[i].hasOwnProperty('strokeColor')) { 
 
      lc.shapes[i].strokeColor = "red"; 
 
     } else { 
 
      // line shape 
 
      lc.shapes[i].color = "red"; 
 
    } 
 
    } 
 
    lc.repaintAllLayers(); 
 
} 
 

 
$(document).ready(function() { 
 
    lc = LC.init(
 
     document.getElementsByClassName('literally')[0]); 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script> 
 
<link href="http://literallycanvas.com/_static/lib/css/literallycanvas.css" rel="stylesheet"/> 
 
<script src="http://literallycanvas.com/_static/lib/js/literallycanvas.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Draw a line, then press "Test" button 
 
<button onclick="test()">Test</button> 
 
<div class="literally"></div>