cách được khuyến nghị để mở rộng các lớp học trong Paper.js

Question

Có cách nào được khuyến nghị để mở rộng các lớp trong Paper.js không? Đặc biệt, tôi quan tâm trong việc mở rộng Path

Pardon nếu thuật ngữ của tôi là không chính xác, nhưng tôi essentailly hỏi cùng một câu hỏi về giấy that is being asked about three here

Answer 1

Dựa trên nhận xét của bạn lên phiên bản ban đầu của câu trả lời của tôi, bạn đang tìm kiếm cho chức năng 'mở rộng' (oops, đó là chính xác những gì bạn có nghĩa là) để làm subclassing. Trong một email to the paper.js mailing list, Jürg Lehni (một trong những người sáng tạo) cho biết:

Đối với subclassing, đó không phải là cái gì đó được hỗ trợ tại thời điểm . Nó có thể hoạt động, có thể không, nó có thể hoạt động trong hầu hết các trường hợp, nhưng không phải trong những trường hợp rất hiếm khi xác định, nó có thể chỉ cần một vài thay đổi để làm cho nó hoạt động tốt, nhưng chúng có thể ở nhiều Những nơi khác nhau.

Ví dụ: mỗi lớp con Mục có thuộc tính _type là một chuỗi đại diện cho loại của nó. Đôi khi chúng tôi kiểm tra thay vì sử dụng ví dụ , vì nó nhanh hơn, và cho đến nay, ví dụ cho Đường dẫn chúng tôi giả định rằng sẽ không có phân lớp phụ.

Một biến chứng là không có đối tượng paper.Path.Rectangle. Có những đường dẫn, và có hình chữ nhật, nhưng khi bạn gọi new paper.Path.Rectangle() nó tạo ra một Path mới bằng cách sử dụng mã khởi tạo (createRectangle) tạo ra một hình chữ nhật.

Vì vậy, chúng tôi cần mở rộng paper.Path. Thật không may, khi bạn gọi new paper.Path.Rectangle, cuộc gọi này gọi số createPath, trả về số Path (không phải là tiện ích của bạn). Có thể làm điều gì đó như:

var SuperRectangle = paper.Path.extend({ 
    otherFunc: function() { 
     console.log('dat'); 
    } 
}); 

... và với thay thế/trọng cho createRectangle hay createPath một cách chính xác có được một lớp con để làm việc. Thật không may, tôi đã không thể quản lý nó.

giới thiệu làm việc đầu tiên của tôi là làm cho một nhà máy và thêm chức năng của bạn để các đối tượng trong nhà máy đó (jsbin here):

var createSuperRectangle = function(arguments){ 
    var superRect = new paper.Path.Rectangle(arguments); 
    superRect.otherFunc = function(){ 
     console.log('dat'); 
    } 
    return superRect; 
    } 
    var aRect = new Rectangle(20, 30, 10, 15); 
    var aPath = createSuperRectangle({ 
    rectangle: aRect, 
    strokeColor: 'black' 
    }); 
    aPath.otherFunc(); 

Tương tự, bạn có thể sử dụng các nhà máy chỉ cần thay đổi các nguyên mẫu cho SuperRectangles của bạn, có thêm các chức năng của bạn để mà đối tượng nguyên mẫu (và làm nguyên mẫu của nó một từ paper.Path.__proto__) (jsbin here):

var superRectProto = function(){}; 
    var tempRect = new paper.Path.Rectangle(); 
    tempRect.remove(); 
    superRectProto.__proto__ = tempRect.__proto__; 
    superRectProto.otherFunc = function(){ 
    console.log('dat'); 
    } 
    delete tempRect; 
    var createSuperRectangle = function(arguments){ 
    var superRect = new paper.Path.Rectangle(arguments); 
    superRect.__proto__ = superRectProto; 
    return superRect; 
    } 
    var aRect = new Rectangle(20, 30, 10, 15); 
    var aPath = createSuperRectangle({ 
    rectangle: aRect, 
    strokeColor: 'black' 
    }); 
    aPath.otherFunc(); 

altern atively, bạn có thể làm cho một đối tượng mà gói gọn con đường (jsbin here):

var SuperRectangle = function(arguments){ 
    this.theRect = new paper.Path.Rectangle(arguments); 
    this.otherFunc = function(){ 
     console.log('dat'); 
    } 
    } 
    var aRect = new Rectangle(20, 30, 10, 15); 
    var aPath = new SuperRectangle({ 
    rectangle: aRect, 
    strokeColor: 'black' 
    }); 
    aPath.otherFunc(); 
    aPath.theRect.strokeWidth = 5; 

Thật không may, sau đó truy cập vào đường dẫn mà bạn phải sử dụng biến theRect.

---

Initial câu trả lời không chính xác sau:

Tôi không nghĩ rằng bạn có nghĩa là "lớp học kéo dài". Trong Javascript, bạn có thể mở rộng các đối tượng để chúng có nhiều chức năng hơn, do đó việc mở rộng Đường dẫn "lớp" sẽ có nghĩa là tất cả các đối tượng Đường dẫn có cùng chức năng mới. Phần mở rộng đối tượng Javascript được mô tả thêm here.

Nếu tôi sai, và bạn muốn mở rộng Path, sau đó bạn có thể sử dụng:

paper.Path.inject({ 
    yourFunctionName: function(anyArgumentsHere) { 
     // your function here 
    } 
}); 

Tuy nhiên, tôi nghĩ rằng bạn đang thực sự nói về việc tạo ra các đối tượng mới mà chủ yếu là cư xử như đối tượng Đường dẫn nhưng có chức năng khác nhau từ mỗi khác. Nếu đúng như vậy, bạn có thể muốn xem câu trả lời này về Javascript using prototypical inheritance. Ví dụ, ở đây tôi tạo ra hai đối tượng Rectangle rằng hành xử khác nhau khi tôi yêu cầu họ doSomething (jsbin here):

var rect1 = new Path.Rectangle({ 
    point: [0, 10], 
    size: [100, 100], 
    strokeColor: 'black' 
    }); 
rect1.doSomething = function() { 
    this.fillColor = new Color('red'); 
}; 
var rect2 = new Path.Rectangle({ 
    point: [150, 10], 
    size: [100, 100], 
    strokeColor: 'black' 
    }); 
rect2.doSomething = function() { 
    this.strokeWidth *= 10; 
}; 
rect1.doSomething(); 
rect2.doSomething(); 

Answer 2

Một vài điều.

1) Bạn có thể bọc đối tượng paperjs gốc nhưng điều này là rất nhiều một hack paperjs playground

function SuperSquare() { 
    this.square = new Path.Rectangle({ 
     size:50, 
     fillColor:'red', 
     onFrame:function(base) { 
      var w2 = paper.view.element.width/2; 
      this.position.x = Math.sin(base.time) * w2 + w2; 
     } 
    }); 
} 
SuperSquare.prototype.setFillColor = function(str) { 
    this.square.fillColor = str; 
} 

var ss = new SuperSquare(); 
ss.setFillColor('blue'); 

2) Tôi có thể sao chép & tạo ra một giấy 2017 mà hoạt động off của es6 để bạn có thể sử dụng extend từ khóa.

3) Tôi đã viết một ứng dụng gọi là Flavas nhưng nó không bao giờ đạt được sau đây vì vậy tôi chỉ loại trái nó. Điều đó đang được nói, tôi đã chơi với nó gần đây; nâng cấp nó lên es6. Với nó, bạn có thể làm những gì bạn đang nói về.

class Square extends com.flanvas.display.DisplayObject { 
    constructor(size) { 
     this.graphics.moveTo(this.x, this.y); 
     this.graphics.lineTo(this.x + size, this.y); 
     this.graphics.lineTo(this.x + size, this.y + size); 
     this.graphics.lineTo(this.x, this.y + size); 
    } 

    someMethod(param) { 
     trace("do something else", param); 
    } 
); 

Tôi đã viết tất cả loại này nhanh chóng để cảm thấy tự do để đánh tôi với Q.