Странное поведение при рисовании на холсте - PullRequest
Новая
       9

Странное поведение при рисовании на холсте

0 голосов
/ 03 апреля 2011

У меня есть приложение CodeIgniter, которое позволяет бизнесу заполнять определенные отчеты онлайн. Одна часть отчета заключается в том, что они могут указать на транспортном средстве, где происходит повреждение. Я сделал это, имея холст, на котором они могут рисовать.

Проблема в том, что при рисовании фонового изображения (автомобиля), на котором они рисуют свои стрелки, чтобы показать влияние и т.д., наблюдается очень странное поведение.

Вот Javascript (как часть сценария в целом): 

    var img = new Image();
    img.src = "/intranet/images/car.png";


    context.drawImage(img, 10, 5, img.width, img.height);

Это все часть скрипта с именем vehicle_canvas.js. Вот откуда и происходит странное поведение. Этот скрипт вызывается с

<script type="text/javascript" src="/intranet/js/vehicle_canvas.js"></script>

В файле представления, расположенном /intranet/application/views/view_instruction.php

Скрипт просто не рисовал изображение транспортного средства, но делал все остальное правильно, и вдруг все заработало, причина была в том, что я случайно загрузил vehicle_canvas.js в другую папку / intranet / pdfs /, а не / интранет / JS /. Теперь, если я удалю скрипт из / pdfs /, он просто не будет работать. / pdfs / нигде не встречается ни в одном из моих файлов просмотра или вызовов Javascript.

Есть идеи?

Вот дерево документа для справки: 

/intranet/
    /pdfs/ 
    /js/  
        /application/  
            /views/  
                 view_instruction.php

1 Ответ

1 голос
/ 03 апреля 2011

Я думаю, что вам, возможно, придется обрезать вещи до самой простой формы - возможно, что-то в кеше, поэтому убедитесь, что вы делаете полное обновление, и т. Д ...

Что касается странности изображения: возможно, это потому, что изображение загружено не полностью, прежде чем вы попытаетесь нарисовать его в элементе canvas. Вы должны ждать загрузки страницы (или, что лучше, загрузки изображения), иначе это не удастся. Что-то вроде: 

var img = new Image();
img.onload = function(){
  context.drawImage(img, 10, 5, img.width, img.height);
}
img.src = "/intranet/images/car.png";
...