Fabric.js 不在 html5 画布上写文本答案

【问题标题】：Fabric.js not writing text on html5 canvasFabric.js 不在 html5 画布上写文本
【发布时间】：2012-11-20 10:43:03
【问题描述】：

好的，这就是正在发生的事情。我在这里有这个使用fabric.js 的页面。得到了所有的问题是changetext（）函数。它不是写到画布上。我知道所有变量都被传递给函数。我知道函数内的代码有效。它只是在函数中不起作用。

    <?
    include 'config/config.php';
    ?>
    <!doctype html>
    <html lang="en">
        <head>
            <title>
                About
            </title>
            <meta charset="UTF-8" />
            <link rel="stylesheet" href="css/main.css" type="text/css" />
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
            <script src="js/fabric.js"></script>
            <script>
            $(document).ready(function(){
                $("#card-worker-box > div").hide();
                  var canvas = new fabric.Canvas('cardmaker');
                  var font = [          
                  'Delicious',        //0
                  'Quake_Cyr',            //1
                  'OdessaScript_500',     //2
                  'CA_BND_Web_Bold_700',  //3
                  'CrashCTT_400',         //4
                  'DejaVu_Serif_400',     //5
                  'Encient_German_Gothic_400',//6
                  'Globus_500',           //7
                  'Modernist_One_400',    //8
                  'Tallys_400',           //9
                  'Terminator_Cyr',       //10
                  'Times_New_Roman',      //11
                  'Vampire95'             //12
                  ];
                   $('#addBackgroundImage').click(function(){
                        canvas.setBackgroundImage('http://localhost/canvas/images/alabama.png', function() {
                            canvas.renderAll();
                          }); 
                   });
                    $('#addText').click(function () {
                        changetext();

                    });

            function changetext(){ 
                var xPos = document.getElementById('xPos').value;
                var yPos = document.getElementById('yPos').value;
                var color = document.getElementById('color').value;
                var mytext = document.getElementById('mytext').value;
                var textObj = new fabric.Text(mytext, {
                    fontFamily: font[0],
                    left: xPos,
                    top: yPos,
                    fontSize: 12,
                    textAlign: "left",
                    fill: color  // Set text color to red
                });
                canvas.add(textObj);
                canvas.renderAll();
             };

                    $('.toggleWidth').click(function(e) {
                        e.preventDefault();
                        var id = $(this).attr("href");
                        $(id).toggle();
                    });


                    jQuery.fn.extend({
                        slideRight: function() {
                            return this.each(function() {
                                $(this).animate({
                                    width: 'show'
                                });
                            });
                        },
                        slideLeft: function() {
                            return this.each(function() {
                                $(this).animate({
                                    width: 'hide'
                                });
                            });
                        },
                        slideToggleWidth: function() {
                            return this.each(function() {
                                var h = $(this);
                                if (h.css('display') == 'none') {
                                    h.slideRight();
                                } else {
                                    h.slideLeft();
                                }
                            });
                        }
                    });
            });
        </script>

        </head>
        <body>
            <div id="card-control-box">
                <div id="card-control-menu-box">
                    <div id="card-menu">
                        <ul>
                            <li><a href="#canvas-image" class="toggleWidth">Image</a></li>
                            <li><a href="#canvas-text" class="toggleWidth">Text</a></li>
                            <li><a href="#canvas-font" class="toggleWidth">Fonts</a></li>
                        </ul>
                    </div>
                    <div id="card-worker-box">
                        <div id="canvas-image">
                            <h3>Image</h3>
                            <input type="text" name="background-image" />
                            <input type="button" value="add image" name="addBackgroundImage" id="addBackgroundImage" />
                        </div>
                        <div id="canvas-text">
                            <h3>Text</h3>
                            <input type="button" value="add text" name="addText" id="addText"/>
                            <label>Top</label><input type="text" id="xPos" name="xPos" />
                            <label>Left</label><input type="text" id="yPos" name="yPos" />
                            <label>Color</label><input type="text" id="color" name="color" />
                            <label>Text</label><input type="text" id="mytext" name="mytext" />
                        </div>
                        <div id="canvas-font">
                            <h3>Font</h3>
                        </div>
                    </div>
            </div>
                <div id="card-canvas-container">
                    <canvas id="cardmaker" width="500" height="225"></canvas>
                </div>
        </div>
                <div class="clearfix"></div>
        </body>
    </html>

【问题讨论】：

标签： jquery html canvas fabricjs

【解决方案1】：

我试过了，我就这样得到了答案。这是我的代码：

  $('#addText').click(function () {
                    changetext();

                });

        function changetext(){ 

            var color = document.getElementById('color').value;
            var mytext = document.getElementById('mytext').value;
            var textObj = new fabric.Text(mytext, {

               fontFamily: 'Arial',
               fontSize:30,
                left:10,
               top:10,
               fill:color,
               shadow: 'green -5px -5px 3px',

            });
            canvas.add(textObj);
            canvas.renderAll();
         };

                $('.toggleWidth').click(function(e) {
                    e.preventDefault();
                    var id = $(this).attr("href");
                    $(id).toggle();
                });


                jQuery.fn.extend({
                    slideRight: function() {
                        return this.each(function() {
                            $(this).animate({
                                width: 'show'
                            });
                        });
                    },
                    slideLeft: function() {
                        return this.each(function() {
                            $(this).animate({
                                width: 'hide'
                            });
                        });
                    },
                    slideToggleWidth: function() {
                        return this.each(function() {
                            var h = $(this);
                            if (h.css('display') == 'none') {
                                h.slideRight();
                            } else {
                                h.slideLeft();
                            }
                        });
                    }
                });
        });

【讨论】：

【解决方案2】：

你的 JS 中添加字体库了吗？尝试添加它们。

【讨论】：