Paper.js 代码在 Chrome 开发人员工具中看起来不同
Paper.js code looks different in Chrome developer tools
这是一个圆在页面上跳动的游戏代码,你需要在一定时间内点击它(naomikudren.com/Catch)。
var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
counter2++
if (counter2 % speed === 0) {
var newPoint = Point.random() * view.size;
circle.position = new Point(newPoint, newPoint);
}
console.log(counter2)
}
circle.onClick = function(event) {
var newPoint = Point.random() * view.size;
circle.position = new Point(newPoint, newPoint);
this.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter++;
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
一切都很好,但当我在 Chrome 的开发人员工具中将 Paperscript 文件作为源查看时,它显示如下:
paper._execute = function(__$__,view,Point,Path,PointText,onFrame) {var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
counter2 = __$__(counter2, "+", 1)
if (__$__(counter2, "%" , speed) === 0) {
var newPoint = __$__(Point.random(), "*" , view.size);
circle.position = new Point(newPoint, newPoint);
}
console.log(counter2)
}
circle.onClick = function(event) {
var newPoint = __$__(Point.random(), "*" , view.size);
circle.position = new Point(newPoint, newPoint);
this.fillColor = {
hue: __$__(Math.random(), "*" , 360),
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter = __$__(counter, "+", 1);
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyIsIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyJdfQ==
return { onFrame: onFrame };
}
我不明白这里发生了什么。 Chrome 不应该按原样显示源文件吗?为什么它与源文件不同,这是否意味着这里发生了某种编译,从 Paperscript 到普通 JavaScript?
这是因为您使用的是 paperscript,而不是 JavaScript。 paperjs 在声明为 paperscript 时会预处理您的代码,Chrome 向您展示的是该预处理的结果。如果您考虑一下,这是有道理的 - Chrome 需要向您展示正在执行的内容,以便有效地进行调试。它无法了解不同类型的脚本预处理可能产生的所有转换。
这是我总是在 JavaScript 模式下使用 paperjs 的原因之一,即使 1) 运算符不起作用,必须使用函数,并且 2) 必须引用 Path.Circle
至 as paper.Path.Circle
(与所有其他纸张对象和变量类似)。
在某些情况下,使用 paperscript 可能会导致奇怪的行为。例如,如果您在代码中使用 view.onFrame = function() {...}
,但还声明了 function onFrame() {...}
,那么将调用视图函数,直到您的代码完成并且 returns 对象 {onFrame: onFrame}
结束。那时 onFrame 函数将替换 view
处理程序。
我还没有对此进行测试,但这是将您的代码快速转换为本机代码的方法 JavaScript。主要区别是 1) 我明确地调用 paper.setup
和 2) 所有对纸质项目的引用都以 paper.
为前缀。我还使用 view.on
处理程序进行帧处理,尽管还有其他方法可以使它工作。
paper.setup("myCanvas");
var circleSize = 60;
var circle = new paper.Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
paper.view.on('frame', function(event) {
counter2++
if (counter2 % speed === 0) {
var newPoint = paper.Point.random().multiply(paper.view.size);
circle.position = new paper.Point(newPoint, newPoint);
}
console.log(counter2)
});
circle.onClick = function(event) {
var newPoint = paper.Point.random().multiply(paper.view.size);
circle.position = new paper.Point(newPoint, newPoint);
this.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter++;
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new paper.PointText(new paper.Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
这是一个圆在页面上跳动的游戏代码,你需要在一定时间内点击它(naomikudren.com/Catch)。
var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
counter2++
if (counter2 % speed === 0) {
var newPoint = Point.random() * view.size;
circle.position = new Point(newPoint, newPoint);
}
console.log(counter2)
}
circle.onClick = function(event) {
var newPoint = Point.random() * view.size;
circle.position = new Point(newPoint, newPoint);
this.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter++;
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
一切都很好,但当我在 Chrome 的开发人员工具中将 Paperscript 文件作为源查看时,它显示如下:
paper._execute = function(__$__,view,Point,Path,PointText,onFrame) {var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
counter2 = __$__(counter2, "+", 1)
if (__$__(counter2, "%" , speed) === 0) {
var newPoint = __$__(Point.random(), "*" , view.size);
circle.position = new Point(newPoint, newPoint);
}
console.log(counter2)
}
circle.onClick = function(event) {
var newPoint = __$__(Point.random(), "*" , view.size);
circle.position = new Point(newPoint, newPoint);
this.fillColor = {
hue: __$__(Math.random(), "*" , 360),
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter = __$__(counter, "+", 1);
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyIsIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyJdfQ==
return { onFrame: onFrame };
}
我不明白这里发生了什么。 Chrome 不应该按原样显示源文件吗?为什么它与源文件不同,这是否意味着这里发生了某种编译,从 Paperscript 到普通 JavaScript?
这是因为您使用的是 paperscript,而不是 JavaScript。 paperjs 在声明为 paperscript 时会预处理您的代码,Chrome 向您展示的是该预处理的结果。如果您考虑一下,这是有道理的 - Chrome 需要向您展示正在执行的内容,以便有效地进行调试。它无法了解不同类型的脚本预处理可能产生的所有转换。
这是我总是在 JavaScript 模式下使用 paperjs 的原因之一,即使 1) 运算符不起作用,必须使用函数,并且 2) 必须引用 Path.Circle
至 as paper.Path.Circle
(与所有其他纸张对象和变量类似)。
在某些情况下,使用 paperscript 可能会导致奇怪的行为。例如,如果您在代码中使用 view.onFrame = function() {...}
,但还声明了 function onFrame() {...}
,那么将调用视图函数,直到您的代码完成并且 returns 对象 {onFrame: onFrame}
结束。那时 onFrame 函数将替换 view
处理程序。
我还没有对此进行测试,但这是将您的代码快速转换为本机代码的方法 JavaScript。主要区别是 1) 我明确地调用 paper.setup
和 2) 所有对纸质项目的引用都以 paper.
为前缀。我还使用 view.on
处理程序进行帧处理,尽管还有其他方法可以使它工作。
paper.setup("myCanvas");
var circleSize = 60;
var circle = new paper.Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
paper.view.on('frame', function(event) {
counter2++
if (counter2 % speed === 0) {
var newPoint = paper.Point.random().multiply(paper.view.size);
circle.position = new paper.Point(newPoint, newPoint);
}
console.log(counter2)
});
circle.onClick = function(event) {
var newPoint = paper.Point.random().multiply(paper.view.size);
circle.position = new paper.Point(newPoint, newPoint);
this.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter++;
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new paper.PointText(new paper.Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';