これは私の初めての投稿なので、質問をできるだけ明確にするように努めます。ここに示すように、HTML5キャンバス要素を操作して背景に対してドラッグ可能でサイズ変更可能な画像を作成するためのライブラリを使用してきました
canvasImgこのライブラリは、canvasElementおよび Yahoo ユーティリティ用の MIT ライセンス ライブラリを使用します。最初の投稿ステータスのため、これらのライブラリへのハイパーリンクを含めることはできませんが、例にはすべて含まれています。
いくつかの変更を加えて、同様のことを達成しようとしています。まず、上記の例はすべて で行われます- ページ上で相対的な位置を指定できる一定サイズのキャンバスにしたいのですが、私がやっていることには必要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
トピックの選択は、私が取り組んでいるものではありません。完全を期すために含めただけです。
現在、私が抱えている問題のいくつかはスタイルに関連している可能性があります.1つは、キャンバスが適切にスタックされず、代わりに一列に並んでおり、画像は挿入されますが、ドラッグまたはサイズ変更されません. 初心者向けのドキュメントを見つけるのに苦労しています。これが実際に非常に単純な問題であり、適切に調査していない場合は、お知らせください。お手数をおかけして申し訳ありません。
最終的にはボタンで画像を挿入したいと思っていますが、今のところ、例のようにキャンバスを正しく動作させることができれば幸いですが、私のaddProblem()機能で再現可能です.