The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
Home Page: http://paperjs.org
License: Other
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
(using the nightly build from 2 nights ago)
onMouseEvent causing issues when selection is enabled.
Here is the line of code it is failing on in findroots:
return [xAxis.intersect(new Line(w[0], w[5], true)).x];
Here is the stack trace:
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
findRoots
getNearestLocation
getNearestLocation
_hitTest
hitTest
_hitTest
hitTest
hitTest
onMouseMove
Anonymous Function
onHandleEvent
mousemove
Consider a layer containing a path and a text:
var myLayer = new paper.Layer();
var dot = new paper.Path.Circle( new paper.Point(50, 50), 40 );
dot.strokeColor = 'black';
myLayer.addChild( dot );
var text = new paper.PointText( 50, 50 );
text.content = 'My Caption';
myLayer.addChild( text );When re-positioning this layer, the text positioning goes wrong.
var tool = new paper.Tool();
tool.onMouseDrag = function( event ) {
myLayer.position = myLayer.position.add( event.delta );
}In current nightly build (Dec. 3), font size is not consistent with previous version. And there's something wrong of PointText's transform calculation. See examples/Scripts/PathStructure.html.
just wondering if there are currently any plans to implement non-affine transforms such as projective texturing?
I found one example here:
http://acko.net/files/projective/index.html
If you're interested at all I'll let you know how it goes.
Error: 'HTMLCanvasElement' is undefined
Sample code:
<!--<!DOCTYPE>-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Missing DOCTYPE causes JS error</title>
<script src="Scripts/paper.js"></script>
<script type="text/paperscript" canvas="canvas1">
</script>
</head>
<body>
<div id="div1">
<canvas id="canvas1">
</canvas>
</div>
</body>
</html>
A Raster uses an Item's hittest function. That function eventually boils down to here:
https://github.com/paperjs/paper.js/blob/master/src/item/Item.js#L768
Where it checks if there are children, and if not, returns. This means that a Raster itself will never return that it was hit.
If I remove every child from a group but not the group itself, I get the following error after removing the last child :
TypeError: Result of expression 'firstChild' [undefined] is not an object. (paper.js:5174)
Great job on this so far!
I was wanting to include multiple tools on the same canvas (draw a rectangle, circle, triangle, etc depending on the user pressing a button on the page outside of the canvas). I assumed the way to accomplish this would be something like:
paper.tool = paper.tools[1];
This tools array never gets updated in code. Maybe there is a different way to accomplish what I am describing? Either way, I would expect paper.tools to be updated. https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L157
if (tool) { paper.tools.push(tool); }
But that only works if I comment out the line
paper = scope
It seems to work, but I am sure this is not the right way to go about it and it might cause other problems. Any advice?
After scaling the layer containing the circle (zoomable) a few times, the script stops working without firing any error in the console. Scaling the circle itself works just fine (toggle the comments in the event listener).
[edit:] I am using a nightly build (Wed Dec 28 09:13:42 2011 +0100).
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scaling Issue</title>
<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
// layers
var gui = new Layer();
var zoomable = new Layer();
// zoomable content
var circle = new Path.Circle(view.center, 50);
circle.fillColor = 'black';
zoomable.addChild(circle);
// create buttons (gui)
var buttonSize = new Size(30);
var buttonPlus = new Path.Rectangle(new Point(10, 10), buttonSize);
var buttonMinus = new Path.Rectangle(new Point(10, 50), buttonSize);
buttonPlus.strokeColor = 'black';
buttonMinus.strokeColor = 'black';
buttonPlus.fillColor = 'white';
buttonMinus.fillColor = 'white';
gui.addChild(buttonPlus);
gui.addChild(buttonMinus);
// event listener
buttonPlus.attach('click', function(event) {
console.log('click: plus');
zoomable.scale(1.1, view.center);
//circle.scale(1.1, view.center);
});
buttonMinus.attach('click', function(event) {
console.log('click: minus');
zoomable.scale(0.9, view.center);
//circle.scale(0.9, view.center);
});
// workaround: click is only available if other events are set
buttonPlus.attach('mouseenter', function() {});
buttonMinus.attach('mouseenter', function() {});
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="300" style="border: 1px dashed black"></canvas>
</body>
</html>
var text = new PointText(new Point(50,100));
text.justification = "left";
text.fillColor = "black";
text.content = "Synergie";
text.characterStyle = {fontSize:10, fillColor:"blue",};
// THIS DOESNT WORK EITHER var text2 = text.rasterize([20]);
// text2.scale(5);
var text2 = text.clone();
text2.position.x = 0;
The following code runs fine outside the mouseover method
thumbsGroup.children["thumb" + ind].visible = false;
But nothing happens when I call it inside the mouse event
function doRollOver( evt ) {
var ind = parseInt( $(this).parent().index() );
console.log( "mouse enter: " + ind );
thumbsGroup.children["thumb" + ind].visible = false;
}I get the console response but nothing happens to the paths, any ideas why?
Moving the canvas element to a different location on the page breaks hit testing.
The scaling factor on the canvas will be compounded each time the view is redrawn because of a ctx.save() without a corresponding ctx.restore().
The restore is here:
https://github.com/paperjs/paper.js/blob/master/src/path/Path.js#L1316
Pulling it out of the if solves the issue.
I understand this is expected behavior, but I really really want to get events for modifier keys. :)
Would such a thing be accepted as a patch? Or maybe a little restructuring so the Key object exposes these functions so I can override/monkeypatch them to add the events?
Just a tip.
I needed to export the paper.js view as SVG for a small project I'm doing. There is a guy who implemented drawing SVG with the same API as HTML5 Canvas. So I managed to get SVG output by swapping the context paper.js uses for drawing and forcing a redraw on the new context:
// These did not match up for some reason
SVGCanvas.prototype.transform = SVGCanvas.prototype.translate;
SVGCanvas.prototype.fillText = SVGCanvas.prototype.text;
paper.View.prototype.toSVG = function() {
var svgContext = new SVGCanvas(this.canvas.width, this.canvas.height);
var oldCtx = this._context;
this._context = svgContext;
this.draw(false);
this._context = oldCtx;
// Optional serialization of the SVG DOM nodes
var serializer = new XMLSerializer();
return serializer.serializeToString(svgContext.svg.htmlElement);
};An SVG drawer with the Canvas API is not only useful for paper.js, but could be used as an SVG exporter for any library that uses . Perhaps someone could extract the code generating SVG render calls and make it more general than it currently is.
Item.transform() currently concatenates a new matrix onto the underlying item matrix, and there does not seem to be support for setting that matrix directly. An example of where this might be useful is warping raster images based on external matrix calculations that may not be conveniently expressible in terms of concatenation.
Here is an example from a few years back, that I'd love to re-implement in Paper.js:
http://s3.amazonaws.com/canvas-warp/2009-11-01/warp-edit.html
A pull request with this change for Raster only is on its way.
They're currently accessible as _m00 ... _m12, but not documented. The underscores suggest that these are private variables. I'm pushing the matrix to an external JS function so that other code can use the same values.
I'm finding that the event.point location is consistently incorrect in paperscript canvases that are nested within elements that use relative positioning. The reported mouse position appears to match the expected location of the mouse if the canvas were pushed up to the top-left corner of the document. Removing "position: relative" from the CSS for the DIV that contains the canvas hides the bug.
Correct mouse position:
<canvas>
</div>
Incorrect mouse position, 20 pixels off:
<canvas>
</div>
Fabric.js provides "anchor" points on the rectangular bounding box, to manipulate scale, size and rotation properties of the selected scene object.
Demo:
http://kangax.github.com/fabric.js/demos/kitchensink/index.html
Open-source code:
If a path has a fill-colour but is not closed (e.g. 2 sides of a triangle), it appears it's not possible to hit-test by 'fill'.
Is this a bug, or intended behaviour?
Using strokeCap 'butt' for a path I have drawn but my hittests are returning that I have clicked on the path when I click in the region that would be filled with strokeCap square.
The hittest should take into account the strokeCap.
For reference, this feature is on Paper.js roadmap already:
http://paperjs.org/about/roadmap/
It will be interesting to compare the performance against Fabric.js (and Raphael.js):
http://kangax.github.com/fabric.js/benchmarks/index.html
For reference, Fabric.js SVG parser code:
https://github.com/kangax/fabric.js/blob/gh-pages/src/parser.js
Demo with many different types of shapes:
http://kangax.github.com/fabric.js/demos/kitchensink/index.html
The title says it all.
I asked @paperjs about this, and they confirmed my suspicions: PointText#bounds is missing at the moment and is needed for blend modes to work for it. Please add it as an issue on GitHub!
Setting a blend mode on a PointText item causes it to simply disappear. I couldn't figure out how specify the bounds manually. Example:
var background = new Path.Rectangle(view.bounds);
background.fillColor = 'white';
text = new PointText(new Point(80, 50));
text.fillColor = 'red';
text.content = "hey"
text2 = new PointText(new Point(90, 50));
text2.fillColor = 'red';
text2.content = "hi there";
text2.bounds = circle.bounds;
text2.blendMode = 'multiply';
circle = new Path.Circle(new Point(120, 50), 35);
circle.fillColor = 'blue';
circle.blendMode = 'multiply';
Bam!
The Event Interval sample in the tutorial was causing my Firefox 5 to completely hang the moment I would click and drag;
In Chrome it continuously throws the following exception:
Uncaught TypeError: Cannot read property 'stopPropagation' of undefined.
When I removed the first line of the script, tool.eventInterval = 30;, it no longer had any problem, but the point of the sample was to demonstrate limiting the segment creation...
Changing tool.eventInterval to Tool.eventInterval seemed to fix the problem. I don't know if tool was a typo in the tutorial or if the library changed it's layout so apologies if this isn't an issue.
I'm attempting to coordinate events between paperscript and javascript events outside of Paper.js, DOM drag/drop events and a canvas that I'd like to track those events. I've found that it's possible to call paper.project._scope.view.draw(); to trigger a redraw, but it's hacky and not quite the right thing.
Can there be a way to set up event handled in paperscript that can be triggered from outside paperscript?
I need double click functionality. This is fairly easy to add by overriding/monkey patching the View._createEvents fn, then the Tool.onHandleEvent function:
var oldViewCreateEvents = paper.View.prototype._createEvents;
paper.View.prototype._createEvents = function() {
var obj = oldViewCreateEvents.call(this);
var view = this;
obj.dblclick = function(event) {
View._focused = view;
if (!(tool = view._scope.tool))
return;
var curPoint = view.viewToProject(DomEvent.getOffset(event, view._canvas));
if (tool.onHandleEvent('dblclick', curPoint, event))
view.draw(true);
}
return obj;
};
and tool event: (proper override in coffeescript)
onHandleEvent: (type, pt, event) =>
called = false
if type == 'dblclick'
#this.updateEvent(type, pt, null, null, true, false, false);
if this.onDblClick
this.onDblClick(new ToolEvent(this, type, event))
called = true
else
called = super(type, pt, event)
called
The issue is that DomEvent is not public. The handler up there needs it for the getOffset function, which is complicated enough I'd rather not duplicate it in my code.
Is this something you guys would consider? I can write the addition to paper if it would be accepted, but making DomEvent public would make me happy as well.
Reference section for *.hittest on paperjs.org says options.segment instead of options.segments
I am using the new Direct Javascript Mode with global scope, I believe I got the setup working correctly as I can view my drawings but the onFrame event is not working, it is not very clear how to set this up in the tutorial so I may be missing something, here is my js code:
paper.install( window );
$(function() {
var canvas = $("#canvas").get(0);
paper.setup( canvas );
$("#image-list").addClass( "image-list-dynamic" );
var thumb = new Thumb( new Point( 50, 100 ), new Size( 100, 200 ) );
view.draw();
});
function onFrame( evt ) {
console.log( "new frame" );
}
// ---------------------------------------
// THUMB OBJECT BEGINS
function Thumb( center, size ) {
console.log( "thumb created: " + center + ", " + size );
this.center = center;
this.size = size;
this.path = new Path.Rectangle( this.center, this.size );
this.path.fillColor = "black";
this.update = function() {
};
}
// THUMB OBJECT ENDS
// ---------------------------------------
"Draw the view at the end, since that is now only automatically handled when a view.onFrame handler is installed" how do I do that I mean install a view.onFrame handler?
Hi,
I'm trying to change the opacity of multiple rasters on a canvas. It works fine for one raster, also works fine for multiple rasters on a canvas with only one raster having its opacity changed. The bug appears when two or more rasters on the same canvas have their opacity changed.
http://files.aiham.net/samples/20110804_paperjs_rasteropacity/test1.html
http://files.aiham.net/samples/20110804_paperjs_rasteropacity/test2.html
The first modifies only one of the images opacity, and works fine.
The second modifies both rasters' opacity, but ends up changing both of the images.
The only difference between the two is that I changed:
raster2.opacity = 1;
to
raster2.opacity = 0.9;
As you can tell from the source, I'm using JavaScript rather than PaperScript.
Aiham
Hi,
I'm not sure if this is a browser issue with canvas and HTML5, or just me not paying attention to certain details?
Resizing of a browser window is not responding properly, and the canvas is not resized!
Manual resize is responding by dragging the corner of a window! But maximizing a window by the window button dosen't work, specially in Firefox and Safari...
ex. see the http://paperjs.org/examples/division-raster/
Resize the browser window by dragging the corner, and maximize the window by the window button, the canvas remains the same size and not scaled to full window size!
Best regards
//A
I'd like to be able to do this: Initialize the global project, and add 1 or more canvases to it. It looks like your are working toward this with views, but I can't see easily how to either initialize the global project, nor add views programmatically.
I use a mac and I have moving between spaces bound to control+arrow keys. When I switch away from my paper application via this key combo, then switch back to the space with the browser, paper thinks control is still pressed.
To repro:
Paper will show the mod key you had pressed as still pressed.
Maybe something could be done on document focus to check the modifier keys for their state, or maybe wipe the mod keys state altogether.
please add this library to the nodejs package manager npm.
Try the following. Before hitting the Resize button, you will notice that the rectangle is moving just fine. Once the canvas is resized, it seems as though we fail to clean up the canvas when redrawing:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resize rendering bug</title>
<script src="Scripts/paper.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Rectangle( [50, 50], [20, 20] );
path.fillColor = "red";
function onFrame() {
path.position.x = Math.random() * view.canvas.width;
path.position.y = Math.random() * view.canvas.height;
}
</script>
<script>
function resizeMe() {
var c = document.getElementById("canvas1");
c.width = c.height = 500;
}
</script>
</head>
<body>
<div id="div1">
<canvas id="canvas1">
</canvas>
</div>
<button onclick="resizeMe()" style="position: absolute; top: 200px">
Resize
</button>
</body>
</html>
Here is an example with setViewSize. If both height and width are CHANGED when setViewState is called, then it works just fine. However if it is only the heightthat has changes, it does not work correctly:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resize rendering bug</title>
<script src="Scripts/paper.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Rectangle( [50, 50], [20, 20] );
path.fillColor = "red";
function onFrame() {
path.position.x = Math.random() * view.canvas.width;
path.position.y = Math.random() * view.canvas.height;
}
</script>
<script>
function resizeMe() {
var c = document.getElementById("canvas1");
c.height = 500;
paper.view.setViewSize(c.width, 500);
}
</script>
</head>
<body>
<div id="div1">
<canvas id="canvas1">
</canvas>
</div>
<button onclick="resizeMe()" style="position: absolute; top: 200px">
Resize
</button>
</body>
</html>
Paper.js 0.22 and nightly build (1 February 2012).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Paper</title>
</head>
<body>
<canvas id="mainView" resize="true"></canvas>
<script src="../Lib/Paper/paper.js" type="text/javascript"></script>
<script type="text/javascript">
paper.install(window);
window.onload = function () {
paper.setup("mainView");
var center = new Point(100, 100);
var sides = 6;
var radius = 20;
var hexagon = new Path.RegularPolygon(center, sides, radius);
hexagon.fillColor = 'black';
hexagon.onMouseEnter = function () {
this.fillColor = 'red';
}
hexagon.onMouseLeave = function () {
this.fillColor = 'black';
}
paper.view.draw();
}
</script>
</body>
</html>
The hexagon is flickering when mouse moving over it (tested in IE 9, FF 9, Chrome 16, Opera 11).
Flickering disappear if change the radius to 21.
var radius = 21;
This very simple test fails (error and traceback below).
var l = new Layer();
l.name = "hello";
this._parent is undefined
var children = this._parent._children,
setName(name="hello")paper.js (line 1873)
eval()1 (line 2)
(?)()paper.js (line 7764)
evaluate(code=undefined, scope=undefined)paper.js (line 7775)
onreadystatechange()paper.js (line 7789)
The reference documentation for HSLColor (http://paperjs.org/reference/hslcolor) does not mention the "lightness" property. It is possible to get and set this property, and it works like I expected, so I think this is a pure documentation issue.
Also, lightness and/or HSL components should probably be mentioned in the documentation for the other color classes as well?
I am trying to untangle some code on a project where this library has been used and expected to be able to roll back to v0.21 with a tag. Not sure how to get back that old version without Googling for an old zip file now!
This works:
<script>var root = 'vendor/paper/';</script>
<script src="vendor/paper/src/load.js"></script>
<script src="script.js" type="text/paperscript"></script>This doesn't:
<script src="vendor/paper.js"></script>
<script src="script.js" type="text/paperscript"></script>I am getting an Uncaught TypeError: Illegal constructor when I declare a color using the new RGBColor() constructor like this:
paper.install(window);
window.onload = function() {
paper.setup( canvas );
var path = new Path.Rectangle([75, 75], [100, 100]);
path.strokeColor = new RGBColor( 1, 0, 0 );
view.onFrame = function(event) {
// On each frame, rotate the path by 3 degrees:
path.rotate(3);
}
}This is using the javascript direct mode.
I was wondering if you guys to could always try to check-in the latest paper.js script file so we can download it without setting up a build environment?
Thanks,
Resizing the width works just fine. Page is not flashing in front of my eyes. However resizing vertically, causes a page clear and a full rerender causing a flash like effect.
Here is a repro:
First try resizing the width and then resize the height (once width finished resizing). You will notice the huge difference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical resize repaints the screen</title>
<script src="Scripts/paper.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Rectangle( [10, 10], [50, 50] );
path.fillColor = "red";
path.strokeColor = "red";
function onFrame() {
var seq = path.segments;
seq[0].point.x = seq[0].point.y = seq[3].point.x = seq[1].point.y = 0;
seq[1].point.x = seq[2].point.x = view.canvas.width;
seq[2].point.y = seq[3].point.y = view.canvas.height;
}
</script>
<script>
var count = 0;
function resizeHeight() {
count = 30;
window.setTimeout(increaseHeight, 100);
}
function resizeWidth() {
count = 30;
window.setTimeout(increaseWidth, 100);
}
function increaseHeight() {
var c = document.getElementById("canvas1");
c.height += 2;
paper.view.setViewSize(c.width, c.height);
if(--count > 0)
window.setTimeout(increaseHeight, 100);
}
function increaseWidth() {
var c = document.getElementById("canvas1");
c.width += 1;
paper.view.setViewSize(c.width, c.height);
if (--count > 0)
window.setTimeout(increaseWidth, 100);
}
</script>
</head>
<body>
<div id="div1">
<canvas id="canvas1">
</canvas>
</div>
<button onclick="resizeHeight()" style="position: absolute; top: 200px">
Resize Height
</button>
<button onclick="resizeWidth()" style="position: absolute; top: 400px">
Resize Width
</button>
</body>
</html>
There is a problem with the current nightly build (Wed Dec 28 09:13:42 2011 +0100) when using fitBounds:
Applied to a group the path's width will change while it stays the same when directly applied to a path. I would expect that the width won't change.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Different Width Issue</title>
<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
var pathGrouped = new Path();
path.strokeColor = 'black';
pathGrouped.strokeColor = 'black';
var startPath = new Point(50, 100);
var startGroup = new Point(50, 50);
path.moveTo(startPath);
path.lineTo(startPath + [ 100, -50 ]);
pathGrouped.moveTo(startGroup);
pathGrouped.lineTo(startGroup + [ 100, 50 ]);
var group = new Group();
group.addChild(pathGrouped);
group.fitBounds(view.size);
path.fitBounds(view.size);
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="300" style="border: 1px dashed black"></canvas>
</body>
</html>
The paper.setup() method only works if I use canvas as is, if I change it to a string 'canvas' in the setup it doesn't work, I even try with different names and same issue.
Iin Chrome I dont get any messages in the console but in Firefox I get the following when I pass a string:
attempt to run compile-and-go script on a cleared scope [Break On This Error] requested = false; paper.js (line 6672)
If I dont pass the string it works but I get this warning and the error message:
Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
paper.setup( canvas );
Why leave out 50% of browsers? Isn't this kind of like Raphael, only less useful for real-world scenarios (without cross-browser support)?
I like library, but I feel like there's no way I can use it.
I just realized I can't make a B shape with compound paths : I give a list of the outer shape, and the two inner shapes as argument to CompoundPath().
What am I missing ?
setting the x and y of a PointText object does not move the text:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PointText position bug</title>
<script src="Scripts/paper.js"></script>
<script type="text/paperscript" canvas="canvas1">
var pt = new PointText(new Point(0, 0));
pt.content = "stuff";
pt.fillColor = "red";
pt.point.x = pt.point.y = 10;
</script>
</head>
<body>
<div id="div1">
<canvas id="canvas1">
</canvas>
</div>
</body>
</html>
Clipping appears to be broken in the nightly build (tested against the 28th and 30th December nightly builds).
The following example works in 0.22:
var circle1 = new Path.Circle(new Point(100,100), 50);
circle1.fillColor = '#444444';
var circle2 = new Path.Circle(new Point(125,100), 50);
circle2.fillColor = '#333333';
var agroup = new Group(circle1,circle2);
agroup.clipped = true;Hi!
I wanted to point out some issues that I ran on, while testing on FF 6.0 .
Probably my code is messy, but it works 100% the way I want it, on Chrome 13 and Chrome Canary (15.0.857.0).
First I noticed that in FF all the code that is out of any functions is executed fine, but when it comes to functions(such as onMouseMove(event)), it doesnt do anything. I runned firebug to find the problem, and it gave me this line in the console, every time I moved the mouse over the canvas:
uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMCanvasRenderingContext2D.textAlign]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: path/paper.js :: <TOP_LEVEL> :: line 5624" data: no]
Line 5624 is actually:
ctx.textAlign = this.getJustification();
Next, when I go to the debugger, enable the "Break On Next", then move my mouse over the canvas, it allways stops at line 6733:
6732 | function mousemove(event) {
6733 | var view;
The console say:
"attempt to run compile-and-go script on a cleared scope
path/paper.js
Line 975"
Line 975:
if (arguments.length == 4) {
What is strange, is that the console not allways show this line, its more like 50% chance to appear.
Thats how the message looks:
http://imageshack.us/photo/my-images/651/screenshot1mi.png/
Also there is the onFrame problem, the debugger keeps breaking on line 6683:
requested = false;
No matter if the onFrame function have any code inside, or is clean. I still guess that my code have nothing to do with it, because both Chrome 13 and Canary dev tools, dont seem to give me any notifications.
Here's my code, the idea behind it is to get used to paper.js:
[js]
var mousePos; //Parameter for holding the mouse position
//Make long story short, define short and clear parameter for center coordinates:
var centerX = view.center.x;
var centerY = view.center.y;
var center = view.center;
var displayX, displayY, sectionN, m; //Parameters in whitch we keep the correct coordinates and a parameter to hold the section of the grid, m representing the gradient of the line between the center and the current coordinates
var coordinates = new PointText(new Point(10, 20)); //Define a "label" in the given position, that will show us current coordinates later
coordinates.justification = 'bottomleft'; //Set an anchor point, from where it will determine the position
coordinates.fillColor = 'white'; //Color - White
var section = new PointText(new Point(10, 40)); //Define a "label" in the given position, that will show us current section later
section.justification = 'left'; //Set an anchor point, from where it will determine the position
section.fillColor = 'white'; //Color - White
var angle = new PointText(new Point(10, 60)); //Define a "label" in the given position, that will show us current angle later
angle.justification = 'left'; //Set an anchor point, from where it will determine the position
angle.fillColor = 'white'; //Color - White
var playerDot = new Path.Circle(center, 30); //Define circle, to represent the player
playerDot.position = center; //Put the "player" in the middle
playerDot.strokeColor = 'blue';
playerDot.strokeWidth = 5;
playerDot.fillColor = 'white';
var test;
var vectorItem;
vectorItem = new Path(new Point(centerX, centerY), new Point(centerX, centerY));
// The amount of circles we want to make:
var counter = 100;
// Create a symbol, which we will use to place instances of later:
var paths = new Path.Circle(new Point(0, 0), 10);
paths.style = {
fillColor: 'red',
strokeColor: 'black'
};
var symbol = new Symbol(paths);
// Place the instances of the symbol:
for (var i = 0; i < counter; i++) {
// The center position is a random point in the view:
var centers = Point.random() * view.size;
var placedSymbol = symbol.place(centers);
placedSymbol.scale(i / counter);
}
project.activeLayer.reverseChildren();
//The event is fired each time the mouse is moved over ther canvas:
function onMouseMove(event)
{
mousePos = event.point; //Define short parameter for current mouse position
//The center of the canvas is the (0,0) coordinate, that means we got to transfer the coordinates
// from positive to negative, when the mouse is lefter/under the center:
if(mousePos.y > centerY)
{
displayY = mousePos.y - centerY + 0.5;
displayY = displayY-displayY*2;
}
else if (mousePos.y < centerY)
{
displayY = centerY - mousePos.y - 0.5;
}
if(mousePos.x > centerX)
{
displayX = mousePos.x - centerX;
}
else if (mousePos.x < centerX)
{
displayX = centerX - mousePos.x;
displayX = displayX - displayX*2;
}
m = displayY/displayX;
//Find the section in whitch the mouse is right now:
if(displayY>0&&displayX>0)
{
test = Math.atan(displayY/displayX)*180/Math.PI;
test = Math.round(test);
sectionN = 1;
}
else if(displayY>0&&displayX<0)
{
test = Math.atan(displayX/displayY)*180/Math.PI*-1+90;
test = Math.round(test);
sectionN = 2;
}
else if(displayY<0&&displayX<0)
{
test = Math.atan(displayY/displayX)*180/Math.PI+180;
test = Math.round(test);
sectionN = 3;
}
else if(displayY<0&&displayX>0)
{
test = Math.atan(displayX/displayY)*180/Math.PI*-1+270;
test = Math.round(test);
sectionN = 4;
}
coordinates.content = 'X = ' + displayX + ', Y = ' + displayY;
coordinates.position = new Point(mousePos.x + 10, mousePos.y);
section.content = 'Section: ' + sectionN + ', m = ' + m;
angle.content = 'Angle: ' + test;
vectorItem.remove();
vectorItem = new Path(new Point(centerX, centerY), new Point(mousePos.x, mousePos.y));
vectorItem.strokeWidth = 2;
vectorItem.strokeColor = '#e4141b';
vectorItem.insertBelow(project.activeLayer);
}
function onFrame(event)
{
}
[/js]
I cleaned the code from all the unnessesary, commented code that I had. First time I'm posting an issue, so correct/ask me for any misstakes/information you need.
P.S.
Forgot to mention, I'm using the last stable version of paper.js - 0.21 .
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.