Processing에서 SVG 선이 특정 조건으로 그려지지 않는 경우

마지막 코딩회에서 SVG를 다룰 때 에 , (시간도 없고) 그려고 싶은 그림을 갑자기 해 보아 표시되지 않으면 곤란하기 때문에, 일단 SVG의 여러가지 패턴을 개별적으로 검증해 본 결과입니다.

결론으로부터, 이라레(CC)의 선의 설정으로, 선종:기본, 필압:균등, 선색:있어, 도색:없음의 것이 그려지지 않는 것을 알았습니다.
SVG적으로는 line요소나 path요소의 style="fill:none;"이 되어 있는 것이 안되는 것 같습니다.



아래와 같이 한 가지 검증 내용입니다.

shape로 지정하는 사이즈(외부 테두리)는 이라레라고 하면 무엇인가

svgdata = loadShape("test_graphic_outline.svg");
// draw
shape(svgdata, 0, 0, 500, 500);//width/heightと同じ大きさで描画

이것은 이라레의 아트 보드가 바깥 테두리가되었습니다.
그래서 200px 사방의 아드보드라면 600px로 그리면 3배가 됩니다.

아트보드를 마이너스 방향으로 돌출하면 그려지는가?

svgdata = loadShape("test_graphic_negative-position.svg");

되었습니다.shape(svgdata, 100, 100, 600, 600) 라고 하는 식으로 플러스 방향으로 어긋나 그리면, 제대로 그려지고 있었습니다.

투명도와 그룹이 제대로 그려지는가?

svgdata = loadShape("test_graphic_alpha.svg");

svgdata = loadShape("test_graphic_group.svg");

svgdata = loadShape("test_graphic_group+alpha.svg");

되었습니다. 그룹에 대한 투명도도 제대로 반영되었습니다.

선은 어디까지 제대로 그려지는지

svgdata = loadShape("test_graphic_line.svg");

경로와 브러시 중 브러시만 표시됩니다.

svgdata = loadShape("test_graphic_lines.svg");

시험에 채우기를 설정해 보면 문제없이 모두 표시되었습니다.

svgdata = loadShape("test_graphics_nofilled-lines.svg");

칠을 배로 하면 직선, 닫힌 베지어 곡선, 열린 베지어 곡선, 브러시 도구의 선을 포함한 SVG를 그려 보았습니다만, 브러시 도구의 선 밖에 그려지지 않습니다.

svgdata = loadShape("test_graphics_styled-lines.svg");

브러시처럼 선종류 등을 여러가지 지정하면 선종류: 기본, 필압: 없음이 그려지지 않는 것 같습니다.

브러시 터치 표현 가능

김에 깜짝 놀랐던 것은 브러시의 터치가 제대로 재현되고 있는 것입니다.
SVG 파일을 보면 벡터로 모양으로 쓰여져 있고 선이 아닌 채우기로 착색되어 있기 때문에 브러시 관계는 표시되고 있다는 것 같습니다.

그것을 합쳐서, 이라레로 일러스트를 써 사용하는 경우, 선을 아웃라인화하는 등 궁리가 필요할지도 모릅니다. 별로 없는 것 같습니다만.

현장에서는 이상입니다.

홍보

원 박에서는 검증조차도 즐겁고 어쩔 수 없는 건강한 프런트 엔드인 사람을 모집하고 있습니다!!!