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);
}
|
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>
|
Спасибо. Возможно ли чтобы при использовании отладчика при пошаговом режиме также постепенно чертился и рисунок на канве, а не только выходил готовый вариант? Chrome почему-то такое не производит, или какую опцию нужно выбрать?
|
o5andrey,
могу сказать только, что плагин позволяет сделать анимацию рисования полос. |
| Часовой пояс GMT +3, время: 11:28. |