这是我第一次发帖，所以我会尽量把问题说清楚。我一直在使用库来操作 HTML5 画布元素以在背景上创建可拖动、可调整大小的图像，如下所示
该库使用 MIT 许可的库，用于canvasImg和canvasElementYahoo 实用程序。由于第一次发布状态，我无法包含指向这些库的超链接，但它们都包含在示例中。
我正在尝试通过一些修改来实现类似的目标。首先，上述所有示例都是在一个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
主题选择不是我正在做的事情，我只是为了完整性而将其包括在内。
现在，我遇到的一些问题可能与样式有关——一方面，画布没有正确堆叠，而是排成一排，图像确实插入但不拖动或调整大小。我很难找到适合初学者的文档，所以如果这实际上是一个我没有正确研究的非常简单的问题，请让我知道并抱歉给您带来麻烦。
最终我希望通过按钮插入图像，但现在如果我能让画布像示例中那样正常工作，但可以通过我的addProblem()功能重现，我会很高兴。