Javascript 将自定义对象添加到paperJS中的组
在PaperJS中,似乎只有常规类型才能添加到组中。每当我尝试用自定义对象附加组时,都会出现错误Javascript 将自定义对象添加到paperJS中的组,javascript,paperjs,Javascript,Paperjs,在PaperJS中,似乎只有常规类型才能添加到组中。每当我尝试用自定义对象附加组时,都会出现错误项。\u remove不是一个函数 每当我创建自己的对象时,例如: function textBox(point, width) { this.box = new Path.Rectangle({ point: point, size: new Size(width,40), strokeColor: new Color(0,0,0,0.1),
项。\u remove不是一个函数
每当我创建自己的对象时,例如:
function textBox(point, width) {
this.box = new Path.Rectangle({
point: point,
size: new Size(width,40),
strokeColor: new Color(0,0,0,0.1),
fillColor: 'white',
strokeWidth: 1
});
this.box.onMouseUp = function(event) {
cursor = this.point + new Point(5,2);
}
}
并尝试将其附加到组:
var testGroup = new Group();
testGroup.appendTop(new textBox(new Point(0,0), 400));
错误出现了。因此,我的问题是:如何将自定义对象添加到组中?当然,我不能期望在不使用组动力学的情况下手动创建每个单独的对象或在单独的级别上操纵它们。似乎我必须,就像PaperJS中的其他类型一样,让我的对象扩展项,但到目前为止,我还没有让它接受我的构造函数。我想知道它需要什么才能被接受。事实上,目前没有内置的机制来扩展
Paper.js
类,除了将它们与库一起编译。因此,对于您可能遇到的简单情况,我将使用一个工厂函数来实例化我的自定义对象,然后与它进行交互,就像与任何其他
Paper.js
对象进行交互一样。例如,如果自定义对象是一个包含文本的框,则可以实例化一个包含矩形和文本的组,然后仅与该组交互 下面是一个演示解决方案的示例
function createMyTextBox(point, content) {
// Create a text item
var text = new PointText({
point: point,
content: content,
fontSize: 36,
fillColor: 'red',
justification: 'center'
});
// Create a rectangle around the text
var rectangle = new Path.Rectangle({
rectangle: text.bounds.scale(1.2),
strokeColor: 'black'
});
// Create a Group that will wrap our items.
var group = new Group([text, rectangle]);
// Return the group
return group;
}
// Create 2 text boxes
var textBox1 = createMyTextBox(view.center, 'text 1');
var textBox2 = createMyTextBox(view.center + [0, 100], 'text 2');
// You can use text boxes like regular items.
textBox2.translate(100, 0);
textBox2.scale(0.8);
事实上,目前没有内置的机制来扩展
Paper.js
类,除了将它们与库一起编译。因此,对于您可能遇到的简单情况,我将使用一个工厂函数来实例化我的自定义对象,然后与它进行交互,就像与任何其他
Paper.js
对象进行交互一样。例如,如果自定义对象是一个包含文本的框,则可以实例化一个包含矩形和文本的组,然后仅与该组交互 下面是一个演示解决方案的示例
function createMyTextBox(point, content) {
// Create a text item
var text = new PointText({
point: point,
content: content,
fontSize: 36,
fillColor: 'red',
justification: 'center'
});
// Create a rectangle around the text
var rectangle = new Path.Rectangle({
rectangle: text.bounds.scale(1.2),
strokeColor: 'black'
});
// Create a Group that will wrap our items.
var group = new Group([text, rectangle]);
// Return the group
return group;
}
// Create 2 text boxes
var textBox1 = createMyTextBox(view.center, 'text 1');
var textBox2 = createMyTextBox(view.center + [0, 100], 'text 2');
// You can use text boxes like regular items.
textBox2.translate(100, 0);
textBox2.scale(0.8);