如何更改字面画布中的笔划颜色

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>