次のパレットを使用して、基本的な MS-Paint タイプの機能を実装するページがあります。
ツールを選択すると、代わりにグレーのアウトラインが表示されます。
現在、灰色の輪郭を持つウィンドウの画像がウィンドウ div の背景として設定されています。個々のツールは 1 つの個別のイメージにあります。
ウィンドウのスタイルを設定し始めると、各ツールは次の性質の css を使用して絶対的に配置されます。
#sketchpad_tools .tool.paintbrush {
background: url(../images/sketchpad/selected_tools.png) no-repeat -15px -80px;
top: 90px; left: 10px;
height: 100px;
width: 100px;
}
これには、各位置に注目し、上部と左側のプロパティを調整してから、ツールが存在する背景画像内の適切な場所を見つける必要があります。これは、非常に時間のかかる作業であることが判明しました。画像の背景サイズを縮小することにした場合 (何度も実行しなければなりませんでした)、完了するまでに 2 倍の時間がかかります。
この種の機能をすばやくスタイリングするためのより生産的な方法はありますか?