問題タブ [scaletransform]

私は一連のCSS六角形を持っています。六角形内にギャップが表示されますが、異なるビューポート幅に CSS スケール変換を適用したいと思います。

この問題は、どのスケール値でも Firefox で最も顕著です。整数以外の値にスケーリングすると、Chrome でも表示されます。Firefox はさらに、:beforeおよび:after疑似要素に不可解な水平線を表示しますが、これらの線は境界線の中央にあり、形状の端にはありません。

切れ端

私のマークアップとスタイルの簡略化されたバージョンは以下にあり、JS Fiddleにもあります。

HTML:

スタイル:

スクリーンショット (Linux Mint)

Chrome: x2 でスケーリング (整数値で明らかなギャップなし)

Firefox: x2 でスケーリング (ギャップ、および水平線)

助けはありますか？

私の推測では、数値の丸めが原因でこれらの線が表示されていると思いますが、本当にアイデアがありません。これを修正することは可能ですか？このスケーリングに使用できる別のアプローチはありますか? ご回答ありがとうございます。

したがって、私のコードでは、画像を 1 と 0 の double int[][] 配列として表しています。画像をより小さな int[][] 配列に縮小できるようにしたいと考えています。これは私がやろうとしていることの例です:

私のためにこのようなことを行うことができるライブラリはありますか? または、これを行うためのコードを作成する方法についてのアイデア。これは、私が探しているメソッド プロトタイプです。

WPF .NET 4.5.1 を使用しています。キャンバスにいくつかの境界線を追加しました。コード ビハインドでは、RenderTransform を適用して、それらすべてを特定の量だけスケーリングします。

他の場所では、Borders の ActualWidth と ActualHeight を使用しようとしましたが、XScale と YScale の値によってスケーリングされません。LayoutTransform も使用してみましたが、どちらも機能しませんでした。

ActualHeight と ActualWidth を使用するときはいつでもスケールを適用しなければならないことに我慢する必要がありますか? それとももっと簡単な方法がありますか？

アップデート：

FrameworkElement の拡張メソッド GetBounds() を使用する 1 つの方法を見つけました。

いつ .NET フレームワークに追加されたのかはわかりませんが、この状況では確かに役に立ちました。変換後に計算された、正確な高さと幅、および他のコントロールに対するコントロールの位置がわかりました。

誰か提案があれば、これを行うためのより良い方法を聞きたいです。

div のコンテンツをズームしようとしています (ブラウザーのズームと同じ動作)。たくさん検索した後、css 3 変換スケール プロパティがこの要件を完全に満たすことがわかりました。スケール サイズを大きくするとコンテンツがズームされますが、div のコンテンツが失われます。オーバーフロー: 非表示も役に立ちませんでした。

JS フィドル リンク: http://jsfiddle.net/chaitut715/k4WsB/

親が拡大縮小されても、svgのストローク幅を維持したい。

以下のようなコードを試していました。

上記はうまく機能しますが、私がやりたいことは以下のようなものです。

したがって、親ダイビングが 5 倍にスケーリングされると、ストロークの出力も 5 倍にスケーリングされます。親 div がスケーリングされていても、四角形のストローク幅を 2 ​​の固定サイズに維持したいと考えています。助けてもらえますか？