сценарий холста greasemonkey - PullRequest
Новая
       10

сценарий холста greasemonkey

2 голосов
/ 02 февраля 2011

Недавно я работал над сценарием Greasemonkey, который бы добавил изображение на определенную страницу, а точнее, http://fairview.deadfrontier.com, с функцией, позволяющей рисовать добавленное изображение.

У меня нет опыта работы с JavaScript, поэтому после мучительного и долгого процесса мне удалось создать автономный блок сценария, который бы справился с работой, и он прекрасно работает, когда используется в автономном режиме в файле .htm.

Но, когда я загружаю скрипт на userscripts.org и устанавливаю в Greasemonkey, он перестает работать.Буду признателен за любые идеи или решения, которые помогут мне закончить сценарий, чтобы я мог поделиться им.Вот этот скрипт в отдельном файле .htm: 

<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>

1 Ответ

1 голос
/ 02 февраля 2011

ОК, вот проблемы, которые я видел с этим файлом (canvas.htm) в отношении преобразования в GM и вообще.
Сначала самое серьезное:

  1. Не / не могу использовать document.write. Используйте что-то вроде: 

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


  2. В Greasemonkey обработчики событий не могут быть установлены как :

    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
);


  3. Не используйте встроенные стили, вы сэкономите массу горя. Если вы создаете узел canvas для элемента 1, то вы можете использовать этот Greasemonkey для его стилизации: 

    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 () );


  4. Математика X / Y отключена, если рассматривать холст как часть большой страницы.

  5. bMouseIsDown, кажется, используется в качестве глобальной переменной; это должно быть установлено как таковое.


Во всяком случае, этого должно быть достаточно, чтобы ваш сценарий GM работал, чтобы начать. Если это так, пометьте этот вопрос как ответ.
Для любых последующих вопросов включите полный код сценария в тело вопроса (но отформатированный для StackOverflow).

...