HTML5의 대화식 이미지

Question

이것은 처음 보는 게시물이므로 최대한 명확하게 질문을 드리겠습니다. here

이 라이브러리를 같이 나는 배경 드래그, 크기를 재조정 할 이미지를 생성하기 위해 HTML5 캔버스 요소를 조작하기위한 도서관과 협력 한 것은 canvasImg, canvasElement 야후 유틸리티에 대한 라이브러리를 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 

주제 선택 것은 아니다 내가 일하고 있어요 무엇을, 난 그냥 완성도를 포함 :

여기에 지금까지 내 코드입니다.

내가 겪고있는 문제 중 일부는 스타일과 관련이있을 수 있습니다. 캔버스가 제대로 쌓이지 않고 행이 늘어서도 이미지가 삽입되지만 끌지는 않습니다. 또는 크기를 조정할 수 있습니다. 초보자에게 익숙하지 않은 문서를 찾는 데 어려움을 겪고 있습니다. 실제로이 문제가 제가 제대로 조사하지 않는 간단한 문제라면, 문제가 생겨서 죄송합니다. & 알려주세요.

결국 버튼으로 이미지를 삽입하고 싶지만 예제 에서처럼 캔버스를 올바르게 가져올 수 있다면 행복 하겠지만 내 addProblem() 기능으로 재생산 할 수는 있습니다.

Answer 1

나는 내 자신의 질문에 대답했습니다. 야후 라이브러리는 나쁜 선택입니다. 나는 fabric.js을 사용하기 시작했으며 훨씬 더 유연하고 스타일을 편집 할 필요가 없다는 보너스를 받았습니다.

Answer 2

발견 한 예는 Yahoo YUI 라이브러리를 사용하고있는 것으로 보입니다. 이것은 좋지 않다는 것을 의미하지는 않지만이 라이브러리를 사용하지 않기 때문에 당신이 뭔가 잘못하면 전화 할 수 없습니다. 먼저, 예제와 같이 라이브러리 파일을 포함했는지 확인하십시오.

그런 다음 Javascript 콘솔에서 코드의 오류를 살펴보십시오. CTRL + ALT + I (또는 Mac의 경우 CMD + ALT + I)를 눌러 (브라우저에 따라) 콘솔을 표시 할 수 있습니다. 찾으면 이미지를 드래그/크기 조정할 때 오류가 표시됩니다.

"동시에 여러 캔버스"부분에 대해서는 내가 생각하는 것처럼 코드가 멋지게 보입니다.