誰能幫我將此論文轉換為javascript嗎？

Question

我有來自paper.js的paperscript，我希望將其轉換為javascript，但無法拖動鼠標進行工作。

當將它們聲明為全局函數時，PaperScript可以識別幾個特殊事件處理程序，而在JavaScript中，需要將它們手動安裝在適當的對象上。

論文的抄本

<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>

先感謝您！

Answer 1

這里詳細介紹了 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>