Question

我正在使用Literally Canvas窗口小部件，我想创建一个onclick函数，触发后会改变已经绘制的颜色（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访问形状数组，抓取元素并更改颜色，然后调用repaintAllLayers()。 repaintAllLayers()方法对于将更改重新绘制到画布上非常重要。

不幸的是，每种形状的颜色属性都不同。矩形和圆圈使用strokeColor，线条使用color，而对于铅笔线，您必须更改它的color属性smoothedPoints。可能存在具有不同颜色属性的其他形状。所以请保持这个作为首发。

您可以在下面找到演示该行为的代码段。因为我还没有为字面扫描找到CDN，所以它不能完全正常工作 - 你只能画一条线，然后按下＆＃34;测试＆＃34;按钮和该行将显示为红色。

＆＃13;

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]);
});

＆＃13;

<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>

＆＃13;

如何在字面上改变笔画的颜色

1 个答案: