0

私のプロジェクトに取り組んでいると、 と を使用して画像によってレンダリングされたテキストの表示に問題があることに気付きましcanvasたJQuery。

コード：

//get values
        var current = $(".activeText a div").attr('id');

        //get font family
        var fFamily = $(".activeText a .fontType-cont").val();

        // default remove old
        $(".customize-Container #draggable").remove();
        //create a canvas for image converting

        $(".customize-Container").append("<div id='draggable'><canvas id='"+current+"'></canvas></div>");
        //create canvas

        var canvas = document.getElementById(current),
        ctx = canvas.getContext('2d'),
        img = document.createElement('img');
        //draw it
        img.onload = drawSmall;
        img.src = $(".activeGColor").find('img').attr('src');

        function drawSmall() {
            var text = $("#fontEnter").val();
            //define new font size
            howMuch = startFontSize - howMuch;
            //define var with new font size
            startFontSize = howMuch;
            //define text font size and family
            ctx.font = howMuch + 'px ' + fFamily;
            //fill with the text
            ctx.fillText(text, 10, 100);
            //draw text
            ctx.globalCompositeOperation = 'source-in';
            ctx.drawImage(img, 10, 20, 500, 100);
        }

これがリサイザー内の関数です。この特定の関数は、テキスト サイズを小さくします。同様のコードを使用してテキストを表示する前に、何が起こるかは完全に機能します。この関数が選択されると、テキストが消えてプロセスが終了せず、キャンバスが空白のままになります。

私はalert()それがどこで止まるかを見てきましたが、機能img.onload = drawSmall;に入らずに止まるようです。drawSmall()

これは Chrome と IE で完璧に動作します (<-- うわー?) 提案を教えてください。

デビッド

アップデート：

Firefoxが私にこれを言っていることに気づきました：

[14:08:46.456] ReferenceError: drawSmall is not defined @ ../wp-content/themes/twentytwelve/js/jquery-latest.min.js:297

4

1 に答える 1

1

FireFox の仕組みがおかしい。これが起こる必要があったことです:

function drawSmall() {
      ...
}
//get values
var current = $(".activeText a div").attr('id');
var text = $("#fontEnter").val();
//get font family

..the rest

function drawSmall()declared beforeキャンバスが宣言されている必要がありました。

于 2013-07-12T19:13:13.520 に答える