{"id":128,"date":"2022-02-28T23:13:07","date_gmt":"2022-02-28T22:13:07","guid":{"rendered":"http:\/\/graphics32\/?page_id=128"},"modified":"2024-03-06T10:35:21","modified_gmt":"2024-03-06T09:35:21","slug":"line-patterns","status":"publish","type":"page","link":"https:\/\/melander.dk\/graphics32\/line-patterns\/","title":{"rendered":"Line Patterns"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Graphics32 defines several functions to support non-uniform lines. This includes gradient lines, dashed lines etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The idea is pretty simple: <a href=\"https:\/\/graphics32.github.io\/Docs\/Units\/GR32\/Classes\/TBitmap32\/_Body.htm\">TBitmap32<\/a> object holds dynamic array of colors, and a counter, which &#8216;crawls&#8217; along the array and reads colors from its position. The line drawing algorithm queries color value from the current counter position at each point, then the counter is automatically incremented to get ready to supply the next value to line rasterisation routine.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">The counter, accessed through <a href=\"https:\/\/graphics32.github.io\/Docs\/Units\/GR32\/Classes\/TCustomBitmap32\/Properties\/StippleCounter.htm\">StippleCounter<\/a> property, wraps itself automatically at the edges of color array. It can move in both directions depending on stipple step, which in turn can be positive or negative. Its value may even be fractional in which case the resulting color is interpolated. The step is accessed with <a href=\"https:\/\/graphics32.github.io\/Docs\/Units\/GR32\/Classes\/TCustomBitmap32\/Properties\/StippleStep.htm\">StippleStep<\/a> property.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/graphics32.github.io\/Docs\/Units\/GR32\/Classes\/TCustomBitmap32\/Methods\/GetStippleColor.htm\">GetStippleColor<\/a> function returns the color from the current counter position and automatically increments counter position by the counter step, so that next <a href=\"https:\/\/graphics32.github.io\/Docs\/Units\/GR32\/Classes\/TCustomBitmap32\/Methods\/GetStippleColor.htm\">GetStippleColor<\/a> call will return a color value from the next position.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<figure class=\"wp-block-table has-small-font-size\"><table class=\"has-fixed-layout\"><thead><tr><th>Warning<\/th><\/tr><\/thead><tbody><tr><td>The stipple counter is not thread-aware; It is shared by all threads accessing the bitmap.<br>Additional care should be taken when multiple threads draw stippled lines in the same bitmap.<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Drawing functions that support line patterns have &#8216;P&#8217; in their <a href=\"https:\/\/melander.dk\/graphics32\/naming-conventions\/\" data-type=\"page\" data-id=\"106\">postfix<\/a> (as in LineFSP).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Drawing a dashed line<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The following code snippet draws a dashed line made up of alternating white dashes and red dots.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ Set up the stipple pattern\nBitmap.SetStipple(&#x5B;clWhite32, clWhite32, clWhite32, 0, 0, clRed32, 0, 0]);\nBitmap.StippleStep := 1; \/\/ 1 pixel per color in pattern\n\n\/\/ Draw a stippled line\nBitmap.LineFSP(10, 10, 50, 100);\n<\/pre><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:150px\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a693d5b82907&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a693d5b82907\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"60\" height=\"110\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/melander.dk\/graphics32\/wp-content\/uploads\/2024\/03\/billede.png\" alt=\"Dashed line\" class=\"wp-image-420\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Dashed line<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Drawing a gradient line<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The following code snippet draws a gradient line. The gradient transitions smoothly from red to blue to yellow.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ Set up the gradient pattern\nBitmap.SetStipple(&#x5B;clRed32, clBlue32, clYellow32]);\nBitmap.StippleStep := 0.1; \/\/ Smooth transition\n\n\/\/ Draw a gradient line\nBitmap.LineFSP(10, 10, 50, 100);\n<\/pre><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:150px\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a693d5b82dd4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a693d5b82dd4\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"60\" height=\"110\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/melander.dk\/graphics32\/wp-content\/uploads\/2024\/03\/billede-1.png\" alt=\"Gradient line\" class=\"wp-image-427\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Gradient line<\/figcaption><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Graphics32 defines several functions to support non-uniform lines. This includes gradient lines, dashed lines etc. The idea is pretty simple: TBitmap32 object holds dynamic array of colors, and a counter, which &#8216;crawls&#8217; along the array and reads colors from its<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-128","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/comments?post=128"}],"version-history":[{"count":17,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages\/128\/revisions"}],"predecessor-version":[{"id":432,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages\/128\/revisions\/432"}],"wp:attachment":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/media?parent=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}