Question

这是我的第一次发帖，所以我会尝试尽可能清楚地提出问题。我一直在使用库来操作HTML5画布元素，以便在背景下创建可拖动，可调整大小的图像here

此库使用MIT许可的库来存储canvasImg，canvasElement和Yahoo实用程序。由于第一个帖子状态，我不能包含这些库的超链接，但它们都包含在示例中。

我正试图通过一些修改来实现类似的东西。首先，所有上述示例都是在iframe中完成的 - 我希望它是一个在我的页面上具有相对位置的常量大小的画布，我不认为iframe是必需的我在做什么

由于它将用于帮助人们说明数学问题，我还打算让整个事物像有问题一样多次出现在新画布上，这是通过按下“新”来创建客户端的。问题“按钮。如果这还不够，我还需要对它们进行设置，以免干扰同一页面上的其他一些MathDox画布。

到目前为止，这是我的代码：

<script type="text/javascript">

    //<![CDATA[
    $(init);
    probNum = 1;//global var for problem printing
    //CANVAS STUFF
    canvas = [];
    img = [];

    //MATHDOX OPTIONS
    //Define mathdox options
    if (org) {
      alert("org already defined, could not set options");
    } else {
      var org = { mathdox: { formulaeditor: { options: {
        dragPalette:true, 
        paletteShow: "none", 
        useBar:true
      }}}};
    }

    function init(){

        //PROBLEM ADDING
        $("#add_problem").click(addProblem);
        addProblem();

        //TOPIC SELECTION
        //load list from database
        $("#topic0").load("<?=base_url()?>ajax/load_topic_list", {"parent_topic":0});
        //when new topic is selected make a new list
        $("#topic0").change(nextList);
        //if no topic is selected, prevent submit
        $("form").submit( function() {
            if ($("#topic").val() == '-1') 
            {
                $('#error').html("You must select a valid topic");
                return false;
            }
        });


    }//end init

    function addProblem()
    {
        //write everything, but of course without any values
        $('#output').append("<br /><h4>Problem Number " + probNum + "</h4>");
        $('#output').append("<canvas id='canvas"+probNum+"'></canvas>")
        $('#output').append("<textarea class='mathdoxformula' id='formula"+probNum+"' rows='10' cols='80'></textarea><br />\n");
        $('#output').append("<textarea id='txt"+probNum+"'></textarea>\n");
        $("#num_probs").val(probNum);
        //Make a new canvas
        canvas[probNum] = new Canvas.Element();
        canvas[probNum].init(('canvas'+probNum), { width: 400, height: 400});
        img[img.length] = new Canvas.Img('img1', {});
        img[img.length] = new Canvas.Img('img2', {});
        img[img.length] = new Canvas.Img('img3', {});
        canvas[probNum].addImage(img[0]);
        canvas[probNum].addImage(img[1]);
        canvas[probNum].addImage(img[2]);
        canvas[probNum].setCanvasBackground(img[2]);
        //make new formula box
        if (!org) 
        {
            alert("no org");
        }
        org.mathdox.formulaeditor.FormulaEditor.updateByTextAreas();
        //increment problem
        probNum++;
    }

    //More javascript to make the problem selector. I should really start organizing this stuff
    var numSelects = 1;

    function nextList() {
        //define default values for current id, parent and next index
        var topicID = $(this).val();
        var parIndex = $('li').index($(this).parent());
        var nextIndex = $('li').index($(this).parent())+1;
        //when selecting a new topic, destroy all old subselections
        $("#topic_list").children().slice(nextIndex).remove();
        //set new topic id
        $("#topic").val(topicID);
        //if it didn't go to zero, append a new topic
        if (topicID != "-1")
        {
            $('#topic_list').append("<li><select id='topic"+nextIndex+"'></select></li>");
            $('#topic'+nextIndex).load("<?=base_url()?>ajax/load_topic_list", {"parent_topic":topicID});
            $('#topic'+nextIndex).change($.proxy(nextList, $('#topic'+nextIndex)));
        }
    }

    //]]>
    </script>

    <img id="img1" class="canvas-img" src="<?=base_url()?>images/canvas/7.jpg" /> 
    <img id="img2" class="canvas-img" src="<?=base_url()?>images/canvas/8.jpg" /> 
    <img id="img3" class="canvas-img" src="<?=base_url()?>images/canvas/9.jpg" />

    <!--Button to replicate and form closing-->
    <div class="container">
        <button id="add_problem" type="button">Add another problem</button>
    </div>

//and more stuff

主题选择不是我正在做的事情，我只是为了完整而包含它。

现在，我遇到的一些问题可能与样式有关 - 一方面画布没有正确堆叠，而只是排成一行，图像插入但不拖动或调整。我无法找到适合初学者的文档，所以如果这实际上是一个非常简单的问题，我没有正确研究，请让我知道＆amp;抱歉，添麻烦了。

最终我想通过按钮插入图像，但是现在我很高兴如果我可以让画布像示例中那样正常工作，但可以使用我的addProblem()重现功能

Answer 1

我已经回答了我自己的问题：雅虎图书馆是一个糟糕的选择。我已经开始使用fabric.js并且发现它更加灵活，还有额外的好处，它也不需要任何样式编辑。

Answer 2

您找到的示例似乎是使用Yahoo YUI库。这并不意味着它不好，但如果你做错了我就不能打电话，因为我没有使用这个库。首先，验证您是否已包含库中的文件，如示例所示。

然后尝试查看Javascript控制台中的代码中的错误。您可以通过按CTRL + ALT + I（或Mac上的CMD + ALT + I）来显示控制台（取决于您的浏览器）。如果找到它，当您尝试拖动/调整图像大小时，可能会看到一些错误。

同时使用＆＃34;多个画布＆＃34;部分，你认为你的代码看起来很好。

HTML5中的交互式图像

2 个答案: