글자 그대로 캔버스에서 획의 색을 변경하는 방법

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

리터럴 캔버스를 사용하면 캔버스에 배치 된 도형의 스타일을 변경할 수 있습니다.

도형 배열에 lc.shapes에 액세스하고 요소를 잡고 색상을 변경 한 후 repaintAllLayers()으로 전화 할 수 있습니다. repaintAllLayers() 방법은 캔버스에 변경 사항을 다시 그리는 데 중요합니다.

유감스럽게도 색상 속성은 각 종류의 모양에 따라 다릅니다. 직사각형과 원은 strokeColor이고, 선은 color이고, 연필 선은 color 속성을 변경해야합니다 (smoothedPoints). 색상 속성이 다른 다른 모양이있을 수 있습니다. 그래서 이것을 선발로 유지하십시오.

아래에서 동작을 보여주는 스 니펫을 찾을 수 있습니다. literallycanvas에 대한 CDN을 찾지 못했기 때문에 완전히 작동하지 않습니다. 단지 줄을 그릴 수 있고 "Test"단추를 누르면 줄이 빨갛게 나타납니다. 에서 [그대로 캔버스 위젯] 약자 lc`

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>