It does not work. (see code billow).
I do not declare a paper.js file because I have the package installed. If I should flush the packageand declare the paper.js I downloaded, there are many files. Beside example and css folders, should I keep only the one named paper.js in the paperjs-v0.9.23/doc/assets/js ?
<head>
<title>tsite01</title>
<!-- Load the Paper.js library: NO because package in Meteor JS-->
<script type="text/javascript">
window.onload = function() {
// Get a reference to the canvas object
var canvas = document.getElementById('framePreview');
// Create an empty project and a view for the canvas:
paper.setup(canvas);
// Create a Paper.js Path to draw a line into it:
var path = new paper.Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new paper.Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note that the plus operator on Point objects does not work
// in JavaScript. Instead, we need to call the add() function:
path.lineTo(start.add([ 200, -50 ]));
// Draw the view now:
paper.view.draw();
}
</script>
</head>
<body>
<h1>Hello World!</h1>
{{> hello}}
<canvas id="framePreview" resize></canvas>
</body>
<template name="hello">
<button>Click here</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
Then you can use template events to be trigger the js at a more apropriate time:
Template.canvas.onRendered(function() {
// Get a reference to the canvas object
var canvas = document.getElementById('framePreview');
// Create an empty project and a view for the canvas:
paper.setup(canvas);
// Create a Paper.js Path to draw a line into it:
var path = new paper.Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new paper.Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note that the plus operator on Point objects does not work
// in JavaScript. Instead, we need to call the add() function:
path.lineTo(start.add([ 200, -50 ]));
// Draw the view now:
paper.view.draw();
});
Then you’ll be sure the canvas is only initialized when it actually exists. You can double check DOM load order is the problem by putting:
Your tip about consol brought me to the list of packages. When I click the source for that package, it says: //Write your package code here! Does it mean my package is empty? I like the rest of your solution because in other words it says: do it the Meteor way and it should be simpler and fine! It solves the 2 ideas of the right call time and in a file for not crowding a markup listing.
But for now, maybe, I need a paper.js package that work. There is more than on in Atmosphere. Any idea of one that works? Thanks for your fast replies, all those involved in this thread.
but include within the paperjs library as the “core” version
Q1) How Do I do it?
But in my beginners understanding, the advantage of making a package is to scope variables to a limited package code.
I wish to maintain these variables and objects during the app execution and wish also to use several canvas.
Q2) How are variable maintained persistant between calls?
Q3) I supose, onRendered is called everytime there is a change in the DOM. But if I need to call functions from buttons or mouse, I will need to write/rewrite code in helpers and events. How can they act on the same objects? Will they be interpreted correctly for paper.js functions? Not sure a understand what scoping will be visible and affected.
(for my POV, on scoping, paper.js documentation is not easy to understand)
Client packages usually just expose stuff to the global window object anyway. For example the jquery package exposes $ so you can use it anywhere.
paper is a global variable and should be accessible anywhere on the client now. In that template code we’ve also bound the paper object to that canvas. So you should be able to draw lines from any other piece of code and have it appear on that same canvas.
Again sure, paper is global just call it when you need to.
I spose it’ll b easier for further guidance if i knew what you were trying to achive with your paper js drawings but feel free to just have a go!
First, thanks, it works now.
Beside an error in the console:
“The connection to ws://localhost:3000/sockjs/255/i5wb1s_q/websocket was interrupted while the page was loading”
(No idea where it comes from)
I will just have a design interface where there will be about 3 canvas zones and button icons. Of the 3 canvas, 2 will be used interactively (drawing, selecting points and curves)
I suppose the bounding of paper object and the canvas is done at:
if (Meteor.isClient) {
Template.previewFrame.onRendered(function(){
var canvas = document.getElementById('previewFrame');
paper.setup(canvas);
I will experiment and see if I can use the global paper for drawing in another canvas than the one I was in for triggering the action.
Thanks again, you have put me on my way, on the road again!
Q1) Paper.js doc is not clear on how we can change of drawing context and from what I tried, I am not sure it keeps record of drawing objects. So, maybe it means we need to rebuild the whole drawing and its paths at every call. Am I right on that?
Q2) Maybe it gives some advantages to keep each canvas in its template, maybe it keeps its specific data context linked to it, especially specific code. But how in Meteor can we call from a template’s code the code of another template (so here that it could draw in its canvas)?
Ya, I have been able to reach that by reading code from other answers in the paper.js mailing list. Thanks for your effort, it looks like what I am doing. Among the most puzzling BUT necessary elements now are:
If I refresh or re-render the page, paper.js objects could (I suppose) be lost. If not, it could generate duplicate initialized paths but assigned to the same variable, loosing pointer to the previous data.
So how people using paper.js manage that? Where would be the best place to initialize paths? And most straight forward way of saving it (if code available)?
When we call varName=new path(…) or new point(…), does it create an object that remains in memory even if varName is cleared from memory because was a local variable?
(not a question) I have sticked to meteor events, not those of paper.js. (it was not working - maybe in conflict) but maybe I will retry them once the rest works) This is my first Meteor JS coding ever. I can say that not much lines of code is needed! : )
For getting mouse coordinates, I do use JQuery-UI:
var pt = new paper.Point(e.pageX-220,e.pageY-164);
where 220 and 164 are canvas position, e the event.
