greasemonkey 캔버스 스크립트

최근 추가 된 이미지를 그릴 수있는 기능을 사용하여 특정 페이지에 이미지를 추가하는 Greasemonkey 스크립트 인 정확히 http://fairview.deadfrontier.com을 작성했습니다.greasemonkey 캔버스 스크립트

저는 JavaScript에 익숙하지 않았기 때문에 고통스럽고 긴 과정을 거친 후 작업을 수행 할 독립 실행 형 스크립트 블록을 만들었습니다.이 스크립트는 .htm 파일에서 오프라인으로 사용하면 잘 작동합니다. .

그러나 userscripts.org에 스크립트를 업로드하고 Greasemonkey에 설치하면 작동이 멈 춥니 다. 스크립트를 완성 할 수 있도록 모든 아이디어 나 솔루션을 제공하여 주시면 감사하겠습니다. 없이

<script type="text/javascript"> 
window.onload = function() { 

    var oCanvas = document.getElementById("thecanvas"); 
     var oCtx = oCanvas.getContext("2d"); 

    var iWidth = oCanvas.width; 
    var iHeight = oCanvas.height; 

    oCtx.fillStyle = "transparent"; 
    oCtx.fillRect(0,0,iWidth,iHeight); 

    oCtx.beginPath(); 
    oCtx.strokeStyle = "rgb(255,0,0)"; 

    oCanvas.onmousedown = function(e) { 
     bMouseIsDown = true; 
     iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
     iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
    } 
    oCanvas.onmouseup = function() { 
     bMouseIsDown = false; 
     iLastX = -1; 
     iLastY = -1; 
    } 
    oCanvas.onmousemove = function(e) { 
     if (bMouseIsDown) { 
      var iX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
      var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
      oCtx.moveTo(iLastX, iLastY); 
      oCtx.lineTo(iX, iY); 
      oCtx.stroke(); 
      iLastX = iX; 
      iLastY = iY; 
     } 
    } 
} 
document.write("<canvas width=\"356\" height=\"700\" style=\"border: 1px solid black; background-image:url('http:\/\/i.imgur.com\/fI3qz.jpg'); position:fixed; top:10px; left: 10px;\" id=\"thecanvas\"><\/canvas>"); 
</script>

나는 또한 이미지를 추가 작업 스크립트를 업로드하는 데 성공했지만 : 바로 여기

~~www.megaupload.com/?d=C92KR3ZO~~ ~~pastebin.com/RTkx1YA7~~ : 여기에 하나의 .htm 파일에 문제가있는 스크립트입니다 그리기 기능.

userscripts.org/scripts/show/95862/

감사 : 그 어떤 도움이 있다면 그래서, 여기에 링크입니다!

출처

2011-02-02 sovq

sovq : 나중에 큰 코드 파일에 링크하려면 pastebin.com과 같은 것을 사용하십시오. megaupload.com은 큰 고통입니다. –

OK, GM으로 변환하는 것과 관련하여 일반적으로 그 파일 (canvas.htm)에서 본 문제점이 있습니다. 가장 심각한 첫째
:

/document.write을 사용할 수 없습니다하지 마십시오. 그리스 몽키에서

var zNode  = document.createElement ('canvas'); 
zNode.setAttribute ('id', 'thecanvas'); 
document.body.appendChild (zNode);

, event handlers can't be set like : 같은 것을 사용 ...

oCanvas.onmousedown = function(e) {을 ...

사용 :

oCanvas.addEventListener 
(
    "mousedown", 
    function (e) 
    { 
     bMouseIsDown = true; 
     iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
     iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
    }, 
    true 
);

인라인 스타일을 사용하지 않으면 슬픔을 덜어줍니다. 당신이 항목 1 당 canvas 노드를 작성하는 경우에, 당신은 그것을 스타일이 그리스 몽키를 사용할 수 있습니다

GM_addStyle ((<><![CDATA[ 
    #thecanvas 
    { 
     width:    356px; 
     height:    700px; 
     border:    1px solid black; 
     background-image: url('http://i.stack.imgur.com/fI3qz.jpg'); 
     position:   fixed; 
     top:    10px; 
     left:    10px; 
    } 
]]></>).toString());

는 X/Y 수학이 꺼져하는의 일환으로 캔버스를 고려할 때 큰 페이지.
bMouseIsDown은 글로벌 변수로 사용되는 것 같습니다. 그것으로 설정되어야합니다.

어쨌든, 그 시작, 작업 당신의 GM 스크립트를 얻을 충분합니다. 그렇다면이 질문에 답변으로 표시하십시오.
후속 질문에 대해서는 질문 본문에 스크립트의 전체 코드를 포함 시키십시오 (단, StackOverflow에 대해서는 코드 형식이 지정됨).

출처

2011-02-02 15:32:13

greasemonkey 캔버스 스크립트

답변

관련 문제