Форум

o5andrey · #1 (**permalink**) 05.02.2017, 16:20

Здравствуйте. Как мне с помощью библиотеки 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

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>

o5andrey · #3 (**permalink**) 06.02.2017, 05:24

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

рони · #4 (**permalink**) 06.02.2017, 08:38

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

Форум

Справочник

Discord чат

Курсы javascript