Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2017, 16:20
Интересующийся
Отправить личное сообщение для o5andrey Посмотреть профиль Найти все сообщения от o5andrey
 
Регистрация: 03.01.2017
Сообщений: 13

paperjs: как нарисовать строчки
Здравствуйте. Как мне с помощью библиотеки paperjs нарисовать полосочки в цикле?
paper.install(window);
paper.setup("field1");//почему-то немного расширяет канву
newCnv.setAttribute('height', 500);
newCnv.setAttribute('width', 700); 
//сделать белый прямоугольник во всё полотно
var r = new Rectangle(0, 0, 700, 500);
var p1 = new Path.Rectangle(r);
p1.fillColor = 'white';
var myPath = new Path();
myPath.strokeColor = 'black';
/* это как-то работает, но рисует лишнюю полосу скраю
var i=0;
for (y=50;y<500;y=y+50)
{
var Pnt1 = new Point(10, y);
var Pnt2 = new Point(690, y);
myPath.moveTo(Pnt1);
myPath.add(Pnt2); 
myPath.add(Pnt1);
//myPath.segment.split(location);
var segm = myPath.segments[i];
myPath.split(segm);
i++;
}
*/
//потом я нашёл что есть lineTo и moveTo, но последний что-то не работает
for (y=50;y<500;y=y+50)
{
   var Pnt1 = new Point(10, y);
   myPath.moveTo(Pnt1);
   var Pnt2 = new Point(690, y);
   myPath.lineTo(Pnt2);
}
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2017, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

o5andrey,
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas-1">

        var start = new Point(0,10);

        var size = 10;
        for (var i = 0; i < size; i++)  {


        var path = new Path();
            path.style = {
            strokeColor: '#E4141B',
            strokeWidth: 2,
            strokeCap: 'round'
        };

        path.add(start + new Point(0, i * 10));
        path.add(start + new Point(i * 400, i * 10));
        }



    </script>
</head>
<body><div class="canvas"><canvas resize="true" id="canvas-1"></canvas></div></body>
</html>

Последний раз редактировалось рони, 05.02.2017 в 17:58.
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2017, 05:24
Интересующийся
Отправить личное сообщение для o5andrey Посмотреть профиль Найти все сообщения от o5andrey
 
Регистрация: 03.01.2017
Сообщений: 13

Спасибо. Возможно ли чтобы при использовании отладчика при пошаговом режиме также постепенно чертился и рисунок на канве, а не только выходил готовый вариант? Chrome почему-то такое не производит, или какую опцию нужно выбрать?

Последний раз редактировалось o5andrey, 06.02.2017 в 05:44.
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2017, 08:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

o5andrey,
могу сказать только, что плагин позволяет сделать анимацию рисования полос.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как нарисовать такой слой? LabMapDo Элементы интерфейса 4 27.08.2014 03:00
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 13:35
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35