-1

画像のサイズを変更するか、色を変更してみてください。画像がちらつく:

ここをクリックして実例をご覧ください(フォントを選択し、[更新] をクリックしてください)

PHP:

    <?php
// Set the content-type
header('Content-Type: image/png');

// Create the image
$im = imagecreatetruecolor(400, 64);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 64, $white);

// The text to draw
$text = $_GET['t']; // text
// Replace path by your own font path
$font = 'fonts/' . $_GET['f'] . '.ttf'; // font

$color = $_GET['c'];
$red = hexdec(substr($color, 0, 2));
$green = hexdec(substr($color, 2, 2));
$blue = hexdec(substr($color, 4, 2));

$font_color = imagecolorallocate($im, $red, $green, $blue);

$size = $_GET['s'];

// Add the text
imagettftext($im, $size, 0, 5, 30, $font_color, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>

JS:

$(function()
        {
            $.farbtastic('#colorpicker', function(color)
            {
                $('#color').val(color);
                updateImage();
            });

            $('#color').blur(function()
            {
                $.farbtastic('#colorpicker').setColor($(this).val());
                updateImage();
            });

            $('#update-btn').click(function()
            {
                updateImage();
            });

        });

        function updateImage()
        {
            $('.sample-text').attr('style', 'background:url(preview.php?s='+$('#font-size').val()+'&c='+$('#color').val().substr(1)+'&f='+$('#font').val()+'&t=' + $('#sample-text').val().replace(' ', '+') + ')');
        }

        function update(value)
        {
            $('#range-display').text(value);
            updateImage();
        }

HTML:

<div>
            <select id="font">
                <option>Choose a Font</option>
                <option value="dandy">Dandy</option>
                <option value="wtf">Pixel Font</option>
            </select>
            <input id="font-size" type="range" min="14" max="70" value="25" onchange="update(this.value)" /><span id="range-display">25</span>
            <input type="text" id="sample-text" placeholder="Sample text" />
            <input type="button" value="Update" id="update-btn" />
            <div id="colorpicker"></div>
            <input type="text" id="color" name="color" value="#123456" />
            <div class="sample-text"></div>
        </div>

ご覧のとおり、サイズと色を更新すると、ちらつきます。どうすればそれを止めることができますか?

4

1 に答える 1

2

プロパティは常に更新backgroundされているため、サイズ変更の1ピクセルごとに画像を再度取得する必要があります。明らかに、それは即座にそれを行うことができないので、あなたはちらつきます。

代わりに、を変更してみてbackground-size、を設定しsetTimeoutて、背景画像を別のサイズで更新してください。それでも短いちらつきが発生する可能性がありますが、現在の状態ほど悪くはありません。また、膨大な量の帯域幅を節約できます。

于 2011-11-16T02:54:16.690 に答える