1

何らかの形状のオブジェクトを含む背景画像があります (以下の例)。新しい画像 - レイヤー (position:absolute - left/top を持つ単純な div) をこの画像に、必要な形状にのみ追加したいと思います。

最初のサンプル

次に、PHP コードを使用して、画像 (たとえば、10、50、..) をこの形状のみに追加し、他の場所には追加しません。

2番目の例

これは、PHP/JS/jquery/... を使用して簡単な方法で実行できますか? アイテムの数と、その領域に追加される画像の数を渡すだけです...

4

2 に答える 2

2

これが私の答えの完全な書き直しです。

ランダムな画像が与えられた場合、いくつかが一致する場合にのみ多くの小さな画像を当てはめます。color

カニはかっこいいので、最初の写真としてカニを使うことにしました。

カニ

写真に青があるところに赤い点だけを追加したい

赤い点

これを行うために、回答を 3 つのセクションに分割します。

HTML

非常に単純な HTML ファイルから始めます。

<html>
    <head>
        <title>Crab Example</title>
    </head>
    <body>
        <div>
            <h1>Dots on the crab example</h1>
        </div>
        <div id="crabSection">
            <img src="crab.png">
        </div>
    </body>
</html>

これにより、点線のカニをレンダリングするための開始点が得られます。

PHP

ここで、PHP で mycrab.pngと my の両方を開いてコンテンツを分析し、セクションに収まるdot.pngランダムな位置を見つけます。の直後に、次を挿入しました。dot.pngall blue<img src="crab.png">

<?php
        $crab = imagecreatefrompng("crab.png");
        $dot = imagecreatefrompng("dot.png");

        $numDesiredDots = 10;
        $numCreatedDots = 0;

        $crabWidth = imagesx($crab);
        $crabHeight = imagesy($crab);

        $dotWidth = imagesx($dot);
        $dotHeight = imagesy($dot);

        $spawnableWidth = $crabWidth - $dotWidth;
        $spawnableHeight = $crabHeight - $dotHeight;

        srand(time());

        $testingForDotSubpart = imagecreatetruecolor($dotWidth, $dotHeight);

        $validCoordinates = array();
        $invalidCoordinates = array();

        $colorWereLookingFor = 0xFF; // ARGB - our crab is blue

ここに、いくつかの詳細があります：

  • $numDesiredDotsは 10 にハードコードされていますが、簡単にパラメーターにすることができます。
  • $spawnableWidth画像の外に出ずに配置できる最大の座標を$spawnableHeight表しますdot
  • srand(time());毎回異なる乱数を持つために単純に使用されます
  • $testingForDotSubpartは、特定の座標をテストして、正しい色のピクセルのみが含まれているかどうかを確認するために使用する小さな画像です
  • $colorWereLookingForblue私のカニは青いので、必要に応じてのredようなものにする必要があります0xFF0000。この例では、HTML と画像処理に同じ PNG を使用しましたが、画像処理用のマスクを簡単に作成し、HTML 用にフルカラー画像を使用することができます。

次に、各ドットの有効な座標を作成する必要があります。これは、次の php で行います。

        while($numCreatedDots < $numDesiredDots)
        {
            $randomX = rand() % $spawnableWidth;
            $randomY = rand() % $spawnableHeight;

            imagecopy($testingForDotSubpart, $crab, 0, 0, $randomX, $randomY, $dotWidth, $dotHeight);
            $valid = true;
            for($x = 0; $x < $dotWidth; $x++)
            {
                for($y = 0; $y < $dotHeight; $y++)
                {
                    if(imagecolorat($testingForDotSubpart, $x, $y) != $colorWereLookingFor)
                    {
                        $valid = false;
                        break 2;
                    }
                }
            }

            if($valid)
            {
                array_push($validCoordinates, array('x' => $randomX, 'y' => $randomY));
                $numCreatedDots++;
            }
            else
            {
                // you can get rid of this else, it's just to show you how many fails there are
                array_push($invalidCoordinates, array('x' => $randomX, 'y' => $randomY));
            }
        }

繰り返しますが、いくつかの説明：

  • 必要なすべてのドットを作成していない限り反復します。非常に複雑な画像の場合、これには時間がかかりすぎる可能性があり、最大試行回数を追加できます
  • ランダムなX,Y座標を作成することから始めます
  • ドットが終わる可能性のある小さなウィンドウをコピーします
  • このウィンドウ内のすべてのピクセルをテストして、正しい色であることを確認します
  • ウィンドウが有効な場合、座標を配列に追加します
  • デバッグ目的で、$invalidCoordinates失敗した試行回数を示す配列を追加しました。図が複雑になればなるほど、失敗する回数が増えます。

すべての位置を計算したので、リソースをクリーンアップする必要があります。

        imagedestroy($testingForDotSubpart);
        imagedestroy($dot);
        imagedestroy($crab);

最後に、削除できるデバッグ出力をいくつか追加しましたが、カニのドットを出力する必要があります。各ドットが一意であるJavaScript alertことを示すために、ドット インデックスを示すを添付しました。

        echo "<p>Valid Coords: <br>";

        foreach($validCoordinates as $coord)
        {
            echo "X: " . $coord['x'] . " Y: " . $coord['y'] . "<br>\n";
        }

        echo "<br>Invalid Coords " . count($invalidCoordinates) . "</p>\n";

        // Now add the dots on the crab!
        for($i = 0; $i < count($validCoordinates); $i++)
        {
            $coord = $validCoordinates[$i];
            echo "<div class='dot' style='left:".$coord['x'].";top:".$coord['y'].";'><a href='javascript:alert(".$i.");'><img src='dot.png'></a></div>\n";
        }        
?>

ここでは、style leftとを使用topして、ドットに正確なピクセル位置を設定しています。それらを親画像と正確に一致させるには、次のセクションで説明するようにposition:relative;andを使用する必要があります。position:absolute;

CSS

ご覧のとおり、 のクラスを使用しています。divこれは を利用するためrelative positioningです。ファイルの先頭、タイトルの直後に次を追加しました

        #crabSection { position:relative; }
        .dot { margin: 0px 0px 0px 0px; position:absolute; }

結果

与えられたスクリプトの実行は次のとおりです...生成された HTML を簡単に保存できるので、毎回位置を再計算する必要はありません。

ブラウザ

お役に立てれば！

編集：必要な場合は、完全なコードを次に示します：pastebin

編集 2 : オーバーラップ チェックがないことに注意し$randomXてください。$randomY$randomX + $dotWidth$randomY + $dotHeight$validCoordinates

編集 3 : 生成されたら、ページのソースを開いてコピーするだけで、div毎回HTML再生成されることはありません。 

<div class='dot' style='left:100;top:105;'><a href='javascript:alert(0);'><img src='dot.png'></a></div>
<div class='dot' style='left:150;top:151;'><a href='javascript:alert(1);'><img src='dot.png'></a></div>
<div class='dot' style='left:128;top:73;'><a href='javascript:alert(2);'><img src='dot.png'></a></div>
<div class='dot' style='left:144;top:93;'><a href='javascript:alert(3);'><img src='dot.png'></a></div>
<div class='dot' style='left:164;top:91;'><a href='javascript:alert(4);'><img src='dot.png'></a></div>
<div class='dot' style='left:108;top:107;'><a href='javascript:alert(5);'><img src='dot.png'></a></div>
<div class='dot' style='left:22;top:101;'><a href='javascript:alert(6);'><img src='dot.png'></a></div>
<div class='dot' style='left:54;top:151;'><a href='javascript:alert(7);'><img src='dot.png'></a></div>
<div class='dot' style='left:32;top:121;'><a href='javascript:alert(8);'><img src='dot.png'></a></div>
<div class='dot' style='left:142;top:87;'><a href='javascript:alert(9);'><img src='dot.png'></a></div>

また、写真で説明されているカラー マスク$crabを PHP で開いてimg srcいれば、カラフルなカニが必要な場合は別のものに変更できます。crabc.pngで現在使用されているファイルを追加しましたが、ファイルimgと同じアウトラインが残っていcrab.pngます。

有色カニ

これにより、この最終的な外観が得られます。

色付きブラウザ

于 2012-12-14T15:31:57.720 に答える
1

うーん、形状がsvgで作成されていない限り、形状に合わせてそれらを追加できるかどうかわかりません。

逆矢印である画像を含むdivを作成できます。つまり、画像は白で、矢印が切り取られ、divにbgcolorがあります。

次に、ドットを同じ div に追加し、z-index を矢印の画像よりも低く設定するだけです。

次に、ドットは矢印にのみ表示されます。問題は、いくつかが追加されても表示されない可能性があることだけです（ユーザーがそれらと対話する必要がある場合のみ問題です）。

ドットで正確に何をしたいですか？

于 2012-12-14T15:18:30.230 に答える