Comments (5)
lehni
commented on August 18, 2024
Yes this is a known issue. Only one tool is supported at the moment. This will be worked on soon.
from paper.js.
bgrins
commented on August 18, 2024
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?
from paper.js.
coldclinic
commented on August 18, 2024
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?
from paper.js.
coldclinic
commented on August 18, 2024
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();
};
from paper.js.
coldclinic
commented on August 18, 2024
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>
from paper.js.
Related Issues (20)
- clipMask with Shape.Rectangle under Chrome canary does not seems to work HOT 1
- paperjs.org is hard to read on mobile
- Problem importing SVG
- Path.area() does not work correctly for path1.exclude(path2)
- `strokeBounds` wrong when `applyMatrix=false` HOT 3
- Not importing the path properly HOT 1
- onClick (and other mouse events) break with a lot of elements on canvas
- hitTestAll method doesn't return Group path
- Dragging elements or points on elements cannot be moved normally HOT 2
- Contributor License Agreement (CLA) Link Is Broken
- Add filter function
- Defining a Path from a Segment array doesn't work; or the Segments property of Path objects is incorrect. HOT 1
- Photon-wasm build error
- Tracing a raster image to a path with holes
- Making Boolean Operations Faster HOT 6
- Using hitTest with options.match never returns a result HOT 1
- Item remove or event handler set to null may cause mouse events to cease working.
- How to ignore fill rule to fill entire path
- Edge-case bugs in boolean operations HOT 2
- Best way to get a PR approved?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from paper.js.