英文:
How do you plot the outside of a curved line with a given thickness in JavaScript?
问题
我正在尝试在另一条给定厚度的线内创建一条线。例如，
<svg viewBox="0 0 100 100">
<path
stroke-width="4" stroke="black"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="none" />
</svg>
这是一个线宽为4像素的心形。我该如何计算内部具有相同线宽的新线的点？
英文:
I'm trying to create a line with a given thickness inside another line of a given thickness. For example,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg viewBox="0 0 100 100">
<path
stroke-width="4" stroke="black"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="none" />
</svg>
<!-- end snippet -->
Is the shape of a heart with a line thickness of 4px
How do I calculate the points of a new line inside this heart line with the same thickness?
答案1
得分: 1
在另一个路径上偏移计算是矢量图形编辑器（如Illustrator或Inkscape）的领域。
如果您只想要渲染出看起来像是偏移路径的东西，可以使用一些掩蔽技巧来帮助：
英文:
Computing a path at an offset from another is the domain of vector grafic editors like Illustrator or Inkscape.
If all you want to do is rendering something that looks like a path at an offset, a bit of masking trickery will help:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg viewBox="0 0 100 100">
<defs>
<path id="heart" stroke-linecap="square"
d="M 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 A 20,20 0,0,1 50,30" />
<mask id="mask">
<use href="#heart" stroke="black" stroke-width="4" fill="white" />
</mask>
</defs>
<use href="#heart" stroke="grey" stroke-width="4" fill="none" />
<use href="#heart" mask="url(#mask)" stroke="blue" stroke-width="12" fill="none" />
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论