paper.tools is never updated (wanting to use multiple tools for same canvas) #27

bgrins · 2011-07-23T19:52:07Z

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?

The text was updated successfully, but these errors were encountered:

lehni · 2011-07-24T00:12:25Z

Yes this is a known issue. Only one tool is supported at the moment. This will be worked on soon.

bgrins · 2011-07-27T13:09:24Z

OK, can I help with this case? I feel like commenting out the paper = scope line would lead to a lot of other problems. Any pointers?

…ve lists and references in the PaperScope (Project, View, Tool), so they can share functionality (#initialize(), #activate(), #remove()), and add support for multiple tools. Closes #27

coldclinic · 2017-12-01T06:49:56Z

How do I draw shapes so that when I press the left mouse button and move, I show the border / contour of a possible future figure?

coldclinic · 2017-12-01T06:58:17Z

tried to start the commented code, but it does not work. I need it to work, as in the code below, but with several tools.


/*
var path;

var toolCircle = new Tool();
toolCircle.activate();
// Only execute onMouseDrag when the mouse
// has moved at least 10 points:
toolCircle.minDistance = 10;


toolCircle.onMouseDown = function(event) {
    // Create a new path every time the mouse is clicked
	path = new Path.Circle({
			center: 	 event.downPoint,
			radius: 	 (event.downPoint - event.point).length,
			strokeColor: 'red'
			});

	path.removeOnDrag();    
}

toolCircle.onMouseDrag = function(event) {
    // Add a point to the path every time the mouse is dragged
    path.add(event.point);
}

function onResize(event) {
	// Whenever the window is resized, recenter the path:
	//path.position = view.center;
}

paper.view.draw();
*/

			function onMouseDrag(event) {
				// The radius is the distance between the position
				// where the user clicked and the current position
				// of the mouse.
				var path = new Path.Circle({
					center: event.downPoint,
					radius: (event.downPoint - event.point).length,
					fillColor: 'white',
					strokeColor: 'black'
				});

				// Remove this path on the next drag event:
				path.removeOnDrag();
			};

coldclinic · 2017-12-01T07:26:01Z

figured out, but now another problem. It is impossible to activate the tool.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Circles</title>
	<script type="text/javascript" src="paper.js"></script>
	<script type="text/paperscript" canvas="canvas">

 	var toolCircle;
	var toolRectangle;

	//window.onload = function() {

	//	paper.setup('canvas');
		var path;

		toolCircle = new Tool();
		toolCircle.activate();
		toolCircle.minDistance = 10;

		toolCircle.onMouseDrag = function(event) {

			var path = new Path.Circle({
						center: event.downPoint,
						radius: (event.downPoint - event.point).length,
						strokeColor: 'red'
					});

					path.removeOnDrag();    

		}

		toolRectangle = new Tool();
		toolRectangle.minDistance = 10;

		toolRectangle.onMouseDrag = function(event) {

		var rectangle = new Rectangle(event.downPoint, event.point);
		var pathRect = new Path.Rectangle(rectangle);

			pathRect.strokeColor = 'red';

		}

		paper.view.draw();
	//}

	</script>
	<style>
		ul.hor_nav {
		margin: 0;
		padding: 0;
		height: 200px;
		}

	   li { 
	    list-style-image: url(check.png);
	    display: inline;
		margin-right: 4px;
		padding: 2px;    
	   }
	   canvas {
	   	border: 1px solid gray;
	   }		
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="600"></canvas>
	<div>
		<ul class="hor_nav">
			<li><a href="javascript:void(0)" class="button button-primary" target="_blank" onclick="toolCircle.activate(); return false">Circle</a></li>
			<li><a href="javascript:void(0)" class="button button-primary" target="_blank" onclick="toolRectangle.activate(); return false">Rectangle</a></li>
		</ul>		
	</div>
</body>
</html>

lehni closed this as completed Jul 24, 2011

lehni reopened this Jul 24, 2011

lehni closed this as completed in 1014e89 Aug 2, 2011

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

paper.tools is never updated (wanting to use multiple tools for same canvas) #27

paper.tools is never updated (wanting to use multiple tools for same canvas) #27

bgrins commented Jul 23, 2011

lehni commented Jul 24, 2011

bgrins commented Jul 27, 2011

coldclinic commented Dec 1, 2017 •

edited

Loading

coldclinic commented Dec 1, 2017 •

edited

Loading

coldclinic commented Dec 1, 2017 •

edited

Loading

paper.tools is never updated (wanting to use multiple tools for same canvas) #27

paper.tools is never updated (wanting to use multiple tools for same canvas) #27

Comments

bgrins commented Jul 23, 2011

lehni commented Jul 24, 2011

bgrins commented Jul 27, 2011

coldclinic commented Dec 1, 2017 • edited Loading

coldclinic commented Dec 1, 2017 • edited Loading

coldclinic commented Dec 1, 2017 • edited Loading

coldclinic commented Dec 1, 2017 •

edited

Loading

coldclinic commented Dec 1, 2017 •

edited

Loading

coldclinic commented Dec 1, 2017 •

edited

Loading