<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p><font size="4">So far, your implementation of VectorGraphics
engine followed the SVG specification. I discovered that when I
implemented the DrGeoSVGCanvas to render a DrGeo sketch to a SVG
file. </font></p>
<p><font size="4">Particularly in the style of the element, the
dashArray attribute was of same nature in VG and SVG:</font></p>
<p><!-- HTML generated using hilite.me --></p>
<div
style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.1em .6em;">
<table>
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17</pre>
</td>
<td>
<pre style="margin: 0; line-height: 125%"><span
style="color: #0066BB; font-weight: bold">DrGSVGCanvas>>styleOf:</span> <span
style="color: #996633">element</span> <span
style="color: #0066BB; font-weight: bold">StrokeWidth:</span> <span
style="color: #996633">strokeWidth</span> <span
style="color: #0066BB; font-weight: bold">color:</span> <span
style="color: #996633">strokeColor</span> <span
style="color: #0066BB; font-weight: bold">strokeDashArray:</span> <span
style="color: #996633">sda</span> <span
style="color: #0066BB; font-weight: bold">fillColor:</span> <span
style="color: #996633">fillColor</span>
<span style="color: #888888">"</span>
<span style="color: #888888"> Apply style to a given element (node) </span>
<span style="color: #888888">"</span>
<span style="color: #996633">strokeWidth</span> <span
style="color: #0066BB; font-weight: bold">ifNotNil:</span> [<span
style="color: #996633">element</span> <span
style="color: #0066BB; font-weight: bold">attributeAt:</span> <span
style="color: #FF0000; background-color: #FFAAAA">#</span><span
style="background-color: #fff0f0">'stroke-width'</span> <span
style="color: #0066BB; font-weight: bold">put:</span> <span
style="color: #996633">strokeWidth</span> <span
style="color: #0066BB; font-weight: bold">asString</span>].
<span style="color: #996633">strokeColor</span> <span
style="color: #0066BB; font-weight: bold">ifNotNil:</span> [ <span
style="color: #996633">element</span> <span
style="color: #0066BB; font-weight: bold">attributeAt:</span> <span
style="color: #AA6600">#stroke</span> <span
style="color: #0066BB; font-weight: bold">put:</span>
(<span style="color: #996633">strokeColor</span> <span
style="color: #0066BB; font-weight: bold">isTransparent</span> <span
style="color: #007020">ifTrue:</span> [<span
style="background-color: #fff0f0">'transparent'</span>] <span
style="color: #007020">ifFalse:</span> <span
style="color: #996633">strokeColor</span> <span
style="color: #0066BB; font-weight: bold">hexHtml</span>)].
<span style="color: #996633">sda</span> <span
style="color: #0066BB; font-weight: bold">ifNotNil:</span> [
<span style="color: #996633">element</span>
<span style="color: #0066BB; font-weight: bold">attributeAt:</span> <span
style="color: #FF0000; background-color: #FFAAAA">#</span><span
style="background-color: #fff0f0">'stroke-dasharray'</span>
<span style="color: #0066BB; font-weight: bold">put:</span> (<span
style="color: #BB0066; font-weight: bold">String</span> <span
style="color: #0066BB; font-weight: bold">streamContents:</span> [<span
style="color: #333333">:</span><span
style="color: #996633">s</span> <span
style="color: #333333">|</span> <span
style="color: #996633">sda</span> <span
style="color: #0066BB; font-weight: bold">do:</span> [<span
style="color: #333333">:</span><span
style="color: #996633">e</span> <span
style="color: #333333">|</span> <span
style="color: #996633">s</span> <span
style="color: #0066BB; font-weight: bold">store:</span> <span
style="color: #996633">e</span>] <span
style="color: #0066BB; font-weight: bold">separatedBy:</span> [ <span
style="color: #996633">s</span> <span
style="color: #0066BB; font-weight: bold">space</span>]])].
<span style="color: #888888">" sdao ifNotNil: [element attributeAt: #'stroke-dashoffset' put: sdao asString]."</span>
<span style="color: #996633">fillColor</span>
<span style="color: #0066BB; font-weight: bold">ifNotNil:</span> [
<span style="color: #996633">element</span> <span
style="color: #0066BB; font-weight: bold">attributeAt:</span> <span
style="color: #AA6600">#fill</span> <span
style="color: #0066BB; font-weight: bold">put:</span> <span
style="color: #996633">fillColor</span> <span
style="color: #0066BB; font-weight: bold">hexHtml</span>.
<span style="color: #996633">fillColor</span> <span
style="color: #0066BB; font-weight: bold">isOpaque</span> <span
style="color: #007020">ifFalse:</span> [<span
style="color: #996633">element</span> <span
style="color: #0066BB; font-weight: bold">attributeAt:</span> <span
style="color: #FF0000; background-color: #FFAAAA">#</span><span
style="background-color: #fff0f0">'fill-opacity'</span> <span
style="color: #0066BB; font-weight: bold">put:</span> <span
style="color: #996633">fillColor</span> <span
style="color: #0066BB; font-weight: bold">alpha</span> <span
style="color: #0066BB; font-weight: bold">asString</span>] ]
<span style="color: #0066BB; font-weight: bold">ifNil:</span> [<span
style="color: #996633">element</span> <span
style="color: #0066BB; font-weight: bold">attributeAt:</span> <span
style="color: #AA6600">#fill</span> <span
style="color: #0066BB; font-weight: bold">put:</span> <span
style="background-color: #fff0f0">'none'</span>]
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">From my understanding, now your
implementation differs in the way dashes are represented in SVG.
It is just an observation not a complain. </div>
<div class="moz-cite-prefix">To minimize my code change, I
implemented a backward compatible method in AbstractVectorCanvas,
it converts my dash (composed of only two numbers) from the former
format to your new format:<br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><!-- HTML generated using hilite.me -->
<div
style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.1em .6em;">
<table>
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16</pre>
</td>
<td>
<pre style="margin: 0; line-height: 125%"><span
style="color: #0066BB; font-weight: bold">strokeWidth:</span> <span
style="color: #996633">borderWidth</span> <span
style="color: #0066BB; font-weight: bold">color:</span> <span
style="color: #996633">borderColor</span> <span
style="color: #0066BB; font-weight: bold">strokeDashArray:</span> <span
style="color: #996633">dashedBorder</span> <span
style="color: #0066BB; font-weight: bold">do:</span> <span
style="color: #996633">pathCommandsBlock</span>
<span style="color: #888888">"</span>
<span style="color: #888888">dashedBorder = array of 2 elements, for example #(1 6), one pixel on, 6 off </span>
<span style="color: #888888">"</span>
<span style="color: #996633">dashedBorder</span>
<span style="color: #0066BB; font-weight: bold">ifNil:</span> [
<span style="color: #007020">self</span>
<span style="color: #0066BB; font-weight: bold">strokeWidth:</span> <span
style="color: #996633">borderWidth</span>
<span style="color: #0066BB; font-weight: bold">color:</span> <span
style="color: #996633">borderColor</span>
<span style="color: #0066BB; font-weight: bold">do:</span> <span
style="color: #996633">pathCommandsBlock</span>]
<span style="color: #0066BB; font-weight: bold">ifNotNil:</span> [
<span style="color: #007020">self</span>
<span style="color: #0066BB; font-weight: bold">strokeWidth:</span> <span
style="color: #996633">borderWidth</span>
<span style="color: #0066BB; font-weight: bold">color:</span> <span
style="color: #996633">borderColor</span>
<span style="color: #0066BB; font-weight: bold">dashedStrokeBits:</span> (<span
style="color: #6600EE; font-weight: bold">2</span> <span
style="color: #0066BB; font-weight: bold">raisedTo:</span> <span
style="color: #996633">dashedBorder</span> <span
style="color: #0066BB; font-weight: bold">first</span>) <span
style="color: #0066BB; font-weight: bold">-</span> <span
style="color: #6600EE; font-weight: bold">1</span> <span
style="color: #0066BB; font-weight: bold"><<</span> <span
style="color: #996633">dashedBorder</span> <span
style="color: #0066BB; font-weight: bold">second</span>
<span style="color: #0066BB; font-weight: bold">do:</span> <span
style="color: #996633">pathCommandsBlock</span> ]
</pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">It works pretty well and keep
DrGSVGCavnas working. It does not work well for my Locus Morph
though. A locus is a collection of points connected by line. See
the below the blue sinus curve should be dashed. Of course it is
related to the way the locus sample are computed, some samples may
be too close to each other to see the dash painted.</div>
<div class="moz-cite-prefix"><b>Surprisingly for me, this problem
was not present in your Smalltalk previous implementation of
dash. </b><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<img moz-do-not-send="false"
src="cid:part1.QxwzVGmg.OTpy3LMc@free.fr" alt="" width="1402"
height="522">
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">When playing a bit with the Morph Locus
parameters to alter the sampling of the locus, we can reveal what
is going on, see below.<br>
</div>
<div class="moz-cite-prefix">
<div class="moz-cite-prefix">All this is not a bug in your
implementation, but your previous implementation could hide this
problem related to sampling at a dynamic rate, and it was pretty
cool.</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
</div>
<div class="moz-cite-prefix"><img
src="cid:part2.z0uaSQhF.4O2E0Ydq@free.fr" alt=""></div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<br>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">Le 27/05/2025 à 17:53, Juan Vuletich a
écrit :<br>
</div>
<blockquote type="cite" cite="mid:6835DFEA.4050700@cuis.st">Not sure
what you mean. Can you give an example? Is there some quick test I
can do that works without the updates?<br>
<br>
Thanks,<br>
</blockquote>
<pre class="moz-signature" cols="72">--
<a class="moz-txt-link-freetext" href="http://mamot.fr/@drgeo">http://mamot.fr/@drgeo</a></pre>
</body>
</html>