Может кто-нибудь помочь мне преобразовать этот paperScript в javascript? - PullRequest
Новая
       45

Может кто-нибудь помочь мне преобразовать этот paperScript в javascript?

0 голосов
/ 23 октября 2018

У меня есть этот paperScript из paper.js, и я хотел бы, чтобы он был преобразован в javascript, но я не могу заставить работать мышью.

PaperScript распознает несколько специальных обработчиков событий, когда они объявлены какглобальные функции, в то время как в JavaScript они должны быть установлены вручную на соответствующем объекте.

Codepen формата paper * 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
  path.strokeColor = 'black';
  path.strokeWidth = 2;
path.selected = true;
  path.closed = true;


var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 8
};



var segment, path;
var movePath = false;
function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
    if (!hitResult)
        return;

    if (event.modifiers.shift) {
        if (hitResult.type == 'segment') {
            hitResult.segment.remove();
        };
        return;
    }

    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        } else if (hitResult.type == 'stroke') {
            var location = hitResult.location;
            segment = path.insert(location.index + 1, event.point);
            //path.smooth();
        }
    }
    movePath = hitResult.type == 'fill';
    if (movePath)
        project.activeLayer.addChild(hitResult.item);
}

function onMouseMove(event) {
    project.activeLayer.selected = false;
    if (event.item)
        event.item.selected = true;
}

function onMouseDrag(event) {
    if (segment) {
        segment.point += event.delta;
        //path.smooth();
    } else if (path) {
        path.position += event.delta;
    }
}


</script>
<canvas id="myCanvas" resize></canvas>

Заранее спасибо!

1 Ответ

0 голосов
/ 03 ноября 2018

Различия между PaperScript и JavaScript контекстами детализированы здесь .
Чтобы сделать меньше изменений в вашем коде, вы должны:

  • Установите Paper.js в глобальном масштабе.Это позволяет вам использовать классы, такие как Path, Point, ... напрямую (без прохождения через глобальный paper объект).

  • Настройка Paper.js чтобы использовать свой холст.Это эквивалентно установке атрибута PaperScript canvas.

  • Создание экземпляра Tool , который будет использоваться для регистрации обработчиков событий.

  • При работе с точками использовать математические операторные функции (например, Point.add () ) вместо операторов (например, +).

Вот ваш код, работающий в JavaScript контексте. 

// expose paperjs classes into global scope
paper.install(window);

// bind paper to the canvas
paper.setup('canvas');

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
path.strokeColor = 'black';
path.strokeWidth = 2;
path.selected = true;
path.closed = true;


var hitOptions = {
  segments: true,
  stroke: true,
  fill: true,
  tolerance: 8
};


var segment, path;
var movePath = false;

// create a custom tool
var customTool = new Tool();

// attach handlers to the tool
customTool.onMouseDown = function(event) {
  segment = path = null;
  var hitResult = project.hitTest(event.point, hitOptions);
  if (!hitResult) {
    return;
  }

  if (event.modifiers.shift) {
    if (hitResult.type == 'segment') {
      hitResult.segment.remove();
    }
    return;
  }

  if (hitResult) {
    path = hitResult.item;
    if (hitResult.type == 'segment') {
      segment = hitResult.segment;
    } else if (hitResult.type == 'stroke') {
      var location = hitResult.location;
      segment = path.insert(location.index + 1, event.point);
      //path.smooth();
    }
  }
  movePath = hitResult.type == 'fill';
  if (movePath) {
    project.activeLayer.addChild(hitResult.item);
  }
};
customTool.onMouseMove = function(event) {
  project.activeLayer.selected = false;
  if (event.item) {
    event.item.selected = true;
  }
};
customTool.onMouseDrag = function(event) {
  if (segment) {
    // use methods instead of operators
    segment.point = segment.point.add(event.delta);
    //path.smooth();
  } else if (path) {
    path.position = path.position.add(event.delta);
  }
};
html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}

canvas[resize] {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas id="canvas" resize></canvas>
...