1

私の問題は非常に単純です。2 つの点があり、その間に線を引きたいと思います。ラインは、同じサイズの 2 つの部分に分割する必要があります。悲しいことに、両端は 2 点の中間で互いに接続されていません。1 ピクセルのギャップが残ります。

このギャップは、アンチエイリアシングによって生じます。2 つの要素の半透明の境界線が「加算」されて白いギャップになります。

svg 属性 "shape-rendering="crispEdges"" を使用して、要素間のギャップを削除するアンチエイリアシングをオフにすることができますが、ここに見られるように、線は単に「醜い」です: http://jsfiddle.net /GsczH/

       <polyline id="line2-part2" stroke="#225788" stroke-width="16" fill="none" points="678.5,124.5 498.5,137.5"/>
       <polyline id="line2-part1" stroke="#0064FF" stroke-width="16" fill="none" points="318.5,150.5 498.5,137.5"/>

これらは、現在実装されている線オブジェクトです。それらの間のギャップを除いて、それらは完全に機能します。

これまでに試した解決策：

-線が重なるように中間点を丸めますが、最初に線が完全にまっすぐではなくなり、それを修正できたとしても、アンチエイリアスによって色が追加され、重なり合うピクセルに「バンプ」が生じます。（私の言いたいことを知りたい場合は、水平線で試してください）

-線を多角形に置き換えることはできますが、コーナーポイントの計算を十分に正確に行うことができませんでした

現時点で私が思いつく最も簡単で最善の解決策は、lineobjects を白に「追加」するのをやめさせることです。簡単に言えば、現時点ではグレー+グレー=白ですが、グレー+グレー=黒が必要です. しかし、彼らにそれをさせることができるかどうかはわかりません。

うまくいけば、私が何かを思いつくのを手伝ってくれるでしょう。前もって感謝します！

4

2 に答える 2

1

ラインに正方形のラインキャップを追加してみてください。これにより、通常、線がどこで「終了する必要がある」かをより直感的に理解できる場所まで、線が端からわずかに引き伸ばされます。

   <polyline id="line2-part2" stroke-linecap="square" stroke="#225788" stroke-width="16" fill="none"  points="678.5,124.5 498.5,137.5"/>
   <polyline id="line2-part1" stroke-linecap="square" stroke="#0064FF" stroke-width="16" fill="none"  points="318.5,150.5 498.5,137.5"/>
于 2013-07-18T18:46:20.830 に答える
0

Chromeでちょっと右に見えます：

                                     

[...] 現時点ではグレー+グレー=白ですが、グレー+グレー=黒が必要です。しかし、私は彼らにそれをやらせることができるのか、それとも熱心にやらせることができるのかわかりません[...]

これは乗算と呼ばれる「ブレンドモード」であり、Operaでのみ機能するようです。

あなたが未来から来ている場合は、 CSS を使用できるかもしれません:

<style>
   polyline { blend-mode: multiply; }
</style>
于 2013-07-16T10:33:10.867 に答える