2

任意の16進数で表示したいアイコンがあります。アイコンのサンプルは以下のとおりですが、色は何でもかまいませんが、HTMLカラーを入力して色を付けるにはどうすればよいですか？背景は地図上でピンポイントになるため、透明にする必要があります。これを達成する方法について何かアイデアはありますか？

ここに画像の説明を入力してください ここに画像の説明を入力してください ここに画像の説明を入力してください

4

2 に答える 2

1

これが私が使用するアプローチです。

そのイメージの色を持たないバージョンから始める必要があります。アウトライン、バス、およびグラデーションに必要な白黒のみです。一部のピクセルが他のピクセルよりも透明になるように、グラデーションにアルファ透過性を持たせる必要があります。その後、画像の背後に任意の色を配置すると、色が変化します。成功！

問題は、これがピンの境界線からはみ出し、マップをオーバーレイする機能が失われることです。そのため、ピンの正確な形状になるように背景アイテムをクリップする方法を見つける必要があります。その端を越えて透明。

同じ形状の単純な SVG 画像を作成し、その背後に配置してみてください。このツールを使用して、このオレンジ色の円を作成しました。

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="200" cy="190" rx="30" ry="30" style="fill:orange"/>
</svg>

ちょっとした作業で、ピンに合う形を得ることができ、それを透明な画像の後ろに配置するときに、Javascript などを使用してテキストを「fill:orange」から任意の色に変更するだけです。あなたがしたい。

別の同様のアプローチは、canvas 要素を使用してその形状を描画することです。また、ブラウザーのサポート内容に応じて、CSS ボーダーの丸めと回転を使って創造的にその形状を作成することもできます。これは、必要な形状に近い css 生成のピンです。ただし、まだ完成していません: (明らかに、コードは Webkit 固有です)

​&lt;div style="background-color: blue; -webkit-transform: rotate(-45deg); width:100px; height:100px; border-radius: 50px 60px 50px 0;"></div>

古いブラウザーで動作する何かをしたい場合は、透明なピンのサイズと正確に同じものを作成するために、高さがすべて 1 ピクセルでさまざまな長さの div の束を作成できます。

<div class="constructedPin">
    <div style="width: 8px"></div>
    <div style="width: 12px"></div>
    <div style="width: 30px"></div>
    <div style="width: 35px"></div>
    <div style="width: 38px"></div>
    <div style="width: 40px"></div>
    <div style="width: 41px"></div>
                 (etc...)
</div>

<style>
 div.constructedPin div { height: 1px; background-color:whatever; margin: auto;}
</style>

次に、div の背景色を変更するのは簡単なことです。このアプローチは複雑に聞こえますが、それほど難しくはありません。実際には、div をハードコードすることができ、その場で生成する必要がなく、CSS の更新が非常に高速であるため、非常に高速にロードされます。

[編集:] 夢中になって、ちょっとしたデモを作りました。明らかに、実際の画像があればよりうまく機能します。アイデアを理解するために、色をすばやく消去しました。

http://jsfiddle.net/eNfak/8/

于 2012-05-14T23:36:35.803 に答える
0

これは、CSS を使用してクライアント側で実行できるとは思いません。指定された色でビットマップを作成するサーバー側関数を使用し (結果をキャッシュする可能性があります)、HTML から呼び出します。

<img src="createicon.ashx?name=truck&color=0xff0000">

元のビットマップは、背景に事前定義された色を使用する必要があります。たとえば赤で、背景以外の領域に赤い部分がない場合、コードはすべての赤いピクセルを探して、それらを新しい背景のパーセンテージで置き換える必要があります。元のピクセルの赤の割合に対応する色 - たとえば、元のピクセルが 50% の赤で、新しい色がティールの場合、ピクセルは 50% のティールになります。

ビットマップの色を変更する方法については、こちらを参照してください。

于 2012-05-14T20:49:43.920 に答える