Tutorial
DSP
KUIML
How-to
Scripts
ScriptsGUIDrawing
September 06, 2020   Ilya

Drawing examples

About

Here are some examples of drawing on CANVAS. More documentation on available methods is here.

Download

drawing.cxx  ·  drawing.kuiml

Contents

drawing.cxx

  1. // THE MAIN CODE IS IN KUIML FILE
  2. string name="CANVAS Examples";

drawing.kuiml

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <SKIN layout_type="column" h_margin="0" v_margin="0">

  4. <!--
  5. Some examples of drawing on CANVAS
  6. =========================
  7. Demo by Ilya Orlov (LetiMix.com) | St. Petersburg, Russia, 2019-20
  8. Original url: https://pns.letimix.com/scripts/gui/drawing
  9. =========================
  10. To make CANVAS updated (redrawn) on some event, you can use something like that:
  11. <ACTION_TRIGGER event_id="SOME_PARAM.value_changed" script="CANVAS_ID.Invalidate()" requires="CANVAS_ID.Invalidate" />
  12. (instead of SOME_PARAM use real param like `custom_param0`,
  13. instead of CANVAS_ID use real element_id, like 'canvas_2')
  14. -->

  16. <ROW spacing="10">
  17. <!-- how to do gradient -->
  18. <CANVAS opacity="1" id="canvas_2" width="100" height="100" render_script=" 
  19. double h=this.height, w=this.width;
  20. auto ctx=Kt::Graphics::GetCurrentContext();
  21. auto gradient = ctx.patterns.NewLinearGradient(0,0,0,h);
  22. gradient.AddColorStopRGB(0, 1, 0, 0);
  23. gradient.AddColorStopRGB(0.3, 1, 0.7, 0);
  24. gradient.AddColorStopRGB(0.7, 0, 0.8, 0);
  25. gradient.SelectAsSource();
  26. ctx.path.Clear();
  27. ctx.path.Rectangle(0,0,w,h);
  28. ctx.FillPath();
  29.  " requires="canvas_2.*" />

  31. <!-- how to draw circle -->
  32. <CANVAS opacity="1" id="canvas_3" requires="canvas_3.*" width="100" height="100" render_script=" 
  33. double h=this.height, w=this.width;
  34. auto ctx=Kt::Graphics::GetCurrentContext();

  36. /* draw a simple circle using arc */
  37. ctx.path.Clear();
  38. ctx.source.SetRGBA (1,0,0, 0.8);
  39. ctx.path.Arc(w/2, h/2, w/2, 0.01, 0); /* cx, cy, radius, angle_start, angle_end */
  40. ctx.FillPath();

  42. /* let's add a 'flare' to our circle */
  43. float xc = w/2-18, yc = h/2-18, radius_start = 5, radius_end = 25;
  44. float r=1, g=0.8, b=0.8, start_alpha=1, end_alpha=0;
  45. auto sh_gradient = ctx.patterns.NewRadialGradient(xc,yc,radius_start,xc-1,yc-1,radius_end);
  46. sh_gradient.AddColorStopRGBA(0, r, g, b, start_alpha);
  47. sh_gradient.AddColorStopRGBA(1, r, g, b, end_alpha);
  48. sh_gradient.SelectAsSource();
  49. ctx.path.Clear();
  50. ctx.path.Arc(xc, yc, radius_end, 0.001, 0);
  51. ctx.FillPath();
  52.  " />

  54. <!-- how to use path masking -->
  55. <CANVAS opacity="1" id="canvas_4" width="80" height="100" render_script=" 
  56. double h=this.height, w=this.width;
  57. auto ctx=Kt::Graphics::GetCurrentContext();

  59. ctx.path.Clear();
  60. ctx.source.SetRGBA (0.5,0.5,1, 0.9);
  61. ctx.path.MoveTo(10,10);
  62. ctx.path.LineTo(80,50);
  63. ctx.settings.set_lineWidth(2);
  64. ctx.path.LineTo(20,90);
  65. ctx.path.Close();
  66. ctx.StrokePath();
  67. ctx.ClipWithPath(); /* this limits future drawing to this path bounds */

  69. ctx.path.Clear();
  70. ctx.source.SetRGBA (1,0.2,0.2, 0.7);
  71. ctx.path.Arc(20, 20, 20, 0.1, 0); /* cx, cy, radius, angle_start, angle_end */
  72. ctx.FillPath();

  74.  " requires="canvas_4.*" />

  76. <!-- how to draw text-->
  77. <CANVAS opacity="1" id="canvas_5" requires="canvas_5.*" width="135" height="100" render_script=" 
  78. double h=this.height, w=this.width;
  79. auto ctx=Kt::Graphics::GetCurrentContext();

  81. /* demos of context modifiers */
  82. ctx.transform.Translate(10,5); /* shift viewpoint */
  83. ctx.transform.Scale(0.9,1); /* scale in x,y */
  84. ctx.transform.Rotate(-5); /* rotate context */

  86. /* `glowing` text */

  88. ctx.font.SetFontSize(40);
  89. ctx.font.SelectFontFace(&quot;Courier New&quot;, Kt::Graphics::kFontSlantNormal, Kt::Graphics::kFontWeightBold);
  90. ctx.path.Clear();
  91. ctx.path.MoveTo(5,40);
  92. ctx.path.Text(&quot;Hello&quot;);

  94. /* create backing `glow` */
  95. float r=0.2, g=.7, b=0.2;
  96. for (int n=1;n&lt;9;n++){
  97. float alpha = n/70.0;
  98. float lw = 18-n*2;
  99. ctx.source.SetRGBA (r,g,b, alpha);
  100. ctx.settings.set_lineWidth(lw);
  101. ctx.StrokePath();
  102. }

  104. /* stroke and fill the `normal` text */
  105. ctx.source.SetRGBA (r,g,b, 1);
  106. ctx.FillPath();
  107. ctx.source.SetRGBA (1,1,1, 0.15);
  108. ctx.settings.set_lineWidth(1);
  109. ctx.StrokePath();

  111. ctx.transform.Rotate(5); /* rotate context back */

  113. /* easy way to write text (but no so beautiful) */
  114. ctx.source.SetRGBA (0.5,0.5,1, 0.9);
  115. ctx.font.SelectFontFace(&quot;Verdana&quot;);
  116. ctx.path.MoveTo(0,80);
  117. ctx.WriteText(&quot;THERE&quot;);

  119.  " />

  121. </ROW>

  123. <CELL height="10" />

  125. <ROW spacing="10">
  126. <!-- how to make "blurred" elements -->
  127. <CANVAS opacity="1" id="canvas_6" requires="canvas_6.*" width="100" height="100" render_script=" 
  128. double h=this.height, w=this.width;
  129. auto ctx=Kt::Graphics::GetCurrentContext();
  130. ctx.source.SetRGBA (0.5,0.5,0.5, 0.3);
  131. ctx.path.Rectangle(0,0,w,h);
  132. ctx.settings.set_lineWidth(1);
  133. ctx.StrokePath();

  135. float r=0.1, g=0.5, b=0.1, last_alpha=0.27;

  137. /* drawing blurred rectangle */
  138. float xc=50, yc=20, w0=60, h0=20, max_steps = 9, step_px = 2;
  139. for (int n=1;n&lt;=max_steps;n++){
  140. float this_alpha = last_alpha*pow(n/max_steps, 1.5);
  141. float this_w = max_steps*step_px+w0-n*step_px;
  142. float this_h = max_steps*step_px+h0-n*step_px;
  143. ctx.path.Clear();
  144. ctx.path.Rectangle(xc-this_w/2, yc-this_h/2, this_w, this_h);
  145. ctx.source.SetRGBA (r,g,b, this_alpha);
  146. ctx.FillPath();
  147. }

  149. /* drawing blurred circle */
  150. r=0.5; g=0.1; b=0.1;
  151. xc=25; yc=60; max_steps = 9; step_px = 1;
  152. float radius=15; last_alpha=0.2;
  153. for (int n=1;n&lt;=max_steps;n++){
  154. float this_alpha = last_alpha*pow(n/max_steps, 1.5);
  155. float r_this = max_steps*step_px+radius-n*step_px;
  156. ctx.path.Clear();
  157. ctx.path.Arc(xc, yc, r_this, 0.1, 0);
  158. ctx.source.SetRGBA (r,g,b, this_alpha);
  159. ctx.FillPath();
  160. }

  162. /* gradient way of drawing blurred circle */
  163. {
  164. r=0.1; g=0.1; b=0.5;
  165. xc=75; yc=60;
  166. float radius_start=15, radius_end=20, start_alpha=0.6, end_alpha=0;
  167. auto sh_gradient = ctx.patterns.NewRadialGradient(xc,yc,radius_start,xc,yc,radius_end);
  168. sh_gradient.AddColorStopRGBA(0, r, g, b, start_alpha);
  169. sh_gradient.AddColorStopRGBA(1, r, g, b, end_alpha);
  170. sh_gradient.SelectAsSource();
  171. ctx.path.Clear();
  172. ctx.path.Arc(xc, yc, radius_end, 0.001, 0);
  173. ctx.FillPath();
  174. }

  176.  " />

  178. <!-- add second gradient on top of first -->
  179. <CANVAS opacity="1" id="canvas_7" requires="canvas_7.*" width="100" height="100" render_script=" 
  180. double h=this.height, w=this.width;
  181. auto ctx=Kt::Graphics::GetCurrentContext();
  182. ctx.source.SetRGBA (0.5,0.5,0.5, 0.3);
  183. ctx.path.Rectangle(0,0,w,h);
  184. ctx.settings.set_lineWidth(1);
  185. ctx.StrokePath();

  187. ctx.path.Rectangle(0, 0, w, h);

  189. /* draw main gradient up-down */
  190. float r=0.1, g=0.1, b=0.5, aa = 1;
  191. auto grad = ctx.patterns.NewLinearGradient(0,0,0,h);
  192. grad.AddColorStopRGBA(0.0, r, g, b, 0.2*aa);
  193. grad.AddColorStopRGBA(1, r, g, b, 0.8*aa);
  194. grad.SelectAsSource();
  195. ctx.FillPath();

  197. /* draw secondary 'mask' gradient */
  198. ctx.settings.set_blendMode(Kt::Graphics::kDrawOpXor);
  199. auto grad2 = ctx.patterns.NewLinearGradient(0,0,w,h);
  200. grad2.AddColorStopRGBA(0.3, 1, 1, 1, 0);
  201. grad2.AddColorStopRGBA(1, 1, 1, 1, 0.2);
  202. grad2.SelectAsSource();
  203. ctx.FillPath();
  204.  " />

  206. <!-- masking 2 -->
  207. <CANVAS opacity="1" id="canvas_8" requires="canvas_8.*" width="100" height="100" render_script=" 
  208. double h=this.height, w=this.width;
  209. auto ctx=Kt::Graphics::GetCurrentContext();
  210. ctx.source.SetRGBA (0.5,0.5,0.5, 0.5);
  211. ctx.settings.set_lineWidth(1);
  212. ctx.path.Clear();
  213. ctx.path.Arc(30,30,15,0.001,0);
  214. ctx.path.Close();

  216. ctx.path.Arc(60,60,15,0.001,0);
  217. ctx.path.Close();

  219. ctx.transform.Translate(w/2,h/2); /* shift viewpoint */
  220. ctx.transform.Scale(0.5,0.5); /* scale in x,y */
  221. ctx.transform.Rotate(45); /* rotate context */

  223. ctx.path.Rectangle(-40,-8,80,16);
  224. ctx.path.Close();
  225. ctx.ClipWithPath();

  227. ctx.transform.Scale(2,2); /* scale in x,y */
  228. ctx.transform.Rotate(-45); /* rotate context */
  229. ctx.transform.Translate(-w/2,-h/2); /* shift viewpoint */

  231. auto grad = ctx.patterns.NewLinearGradient(0,0,w,h);
  232. grad.AddColorStopRGBA(0.0, 0.5,0.1,0.5, 1);
  233. grad.AddColorStopRGBA(1, 0.5,0.1,0.5, 0.2);
  234. grad.SelectAsSource();

  236. ctx.path.Rectangle(0, 0, w, h);

  238. ctx.FillPath();
  239.  " />

  241. </ROW>
  242. </SKIN>