Как изменить цвет штрихов в буквальном холсте

Question

Я использую виджет Literally Canvas, и я хочу сделать функцию onclick, которая при срабатывании изменит цвет (strokeStyle) того, что уже было нарисовано в элементе canvas. Я попытался с помощью:

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

Есть множество других объектов и свойств, и я попробовал много больше, но я не могу показаться, чтобы получить где-нибудь близко, я даже в правильном направлении ?. Единственное, что я пробовал, то, как работает, было использование lc.colors.primary = "red";. Он изменил мой покраснение на красный, но не изменил то, что уже было нарисовано, что означает, что я запускаю функцию и рисую, а штрихи красные, но то, что уже было нарисовано, остается черным как есть.

Answer 1

С буквально холстом вы можете изменить стиль форм, которые размещены на холсте.

Вы можете получить доступ к массиву фигур на lc.shapes, захватить элемент и изменить его цвет, а затем позвонить repaintAllLayers(). Метод repaintAllLayers() важен для изменения изменений на холсте.

К сожалению, цветовые свойства различны для каждого вида формы. Прямоугольники и круг использования strokeColor, линии используют color, а для линий карандашей вы должны изменить color. Недвижимость smoothedPoints. Могут быть другие формы с разными цветовыми свойствами. Поэтому держите это как стартер.

Ниже вы можете найти фрагмент, демонстрирующий поведение. Поскольку я не нашел CDN для буквально canvas, он не работает полностью - вы можете рисовать только строку, а затем нажать кнопку «Test», и строка появится красным цветом.

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>