这是我的第一次发帖,所以我会尝试尽可能清楚地提出问题。 我一直在使用库来操作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()
重现功能
答案 0 :(得分:2)
我已经回答了我自己的问题:雅虎图书馆是一个糟糕的选择。我已经开始使用fabric.js并且发现它更加灵活,还有额外的好处,它也不需要任何样式编辑。
答案 1 :(得分:0)
您找到的示例似乎是使用Yahoo YUI库。这并不意味着它不好,但如果你做错了我就不能打电话,因为我没有使用这个库。 首先,验证您是否已包含库中的文件,如示例所示。
然后尝试查看Javascript控制台中的代码中的错误。您可以通过按CTRL + ALT + I(或Mac上的CMD + ALT + I)来显示控制台(取决于您的浏览器)。如果找到它,当您尝试拖动/调整图像大小时,可能会看到一些错误。
同时使用&#34;多个画布&#34;部分,你认为你的代码看起来很好。