Problems panning large svg in PaperJS
up vote
1
down vote
favorite
var path = new Path.Circle({
center: view.center,
radius: 10,
strokeColor: 'red',
strokeWidth: 3,
applyMatrix: false,
strokeScaling: false
});
var svgItem;
project.importSVG("https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=", {
onLoad : function (item) {
item.center = view.center;
svgItem = item;
}
});
console.log(svgItem);
tool.onMouseMove = function(event) {
//on mouse move the position of 'path' var changes to underneath cursor again
path.position = event.point;
//console.log(event.point); //debug
}
var toolSize = document.getElementById("tool");
console.log(toolSize);
toolSize.addEventListener("change", function(event) {
console.log("Radius slider change detected! " + event.target.value + ". path.radius is: " + path.bounds.width);
//path.radius = event.target.value;
path.scaling = this.value;
});
tool.onMouseDrag = function(event) {
//test to see of the shift key was held whilst a mouse drag action was peformed
if (event.modifiers.shift)
{
//move the image the distance of the mouse drag
svgItem.position = view.center + event.delta;
}
}body,
html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
min-height: 100%;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href="svg_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" id="toolSize" />
<input id="smooth" type="range" name="flatten" min="1" max="10" value="1" step="1" id="smooth" />
<input id="flatten" type="range" name="flatten" min="1" max="10" value="1" step="1" id="flatten" />
</div>
<main>
<canvas id="canvas" resize></canvas>
</main>
<script type="text/paperscript" src="paper_script.js" canvas="canvas">
</script>
</body>
</html>I can't actually get my example to work anywhere except for on localhost but I have a large SVG inside of my paperJS canvas which extends out past the canvas bounds.
When I try to pan it by pressing shift and dragging the mouse the svg moves but ultimately snaps to a specific position and responds but always pings back to this place after that
javascript html css svg paperjs
asked Nov 9 at 12:06
Scott Anderson
879
|
show 1 more comment
up vote
1
down vote
favorite
var path = new Path.Circle({
center: view.center,
radius: 10,
strokeColor: 'red',
strokeWidth: 3,
applyMatrix: false,
strokeScaling: false
});
var svgItem;
project.importSVG("https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=", {
onLoad : function (item) {
item.center = view.center;
svgItem = item;
}
});
console.log(svgItem);
tool.onMouseMove = function(event) {
//on mouse move the position of 'path' var changes to underneath cursor again
path.position = event.point;
//console.log(event.point); //debug
}
var toolSize = document.getElementById("tool");
console.log(toolSize);
toolSize.addEventListener("change", function(event) {
console.log("Radius slider change detected! " + event.target.value + ". path.radius is: " + path.bounds.width);
//path.radius = event.target.value;
path.scaling = this.value;
});
tool.onMouseDrag = function(event) {
//test to see of the shift key was held whilst a mouse drag action was peformed
if (event.modifiers.shift)
{
//move the image the distance of the mouse drag
svgItem.position = view.center + event.delta;
}
}body,
html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
min-height: 100%;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href="svg_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" id="toolSize" />
<input id="smooth" type="range" name="flatten" min="1" max="10" value="1" step="1" id="smooth" />
<input id="flatten" type="range" name="flatten" min="1" max="10" value="1" step="1" id="flatten" />
</div>
<main>
<canvas id="canvas" resize></canvas>
</main>
<script type="text/paperscript" src="paper_script.js" canvas="canvas">
</script>
</body>
</html>I can't actually get my example to work anywhere except for on localhost but I have a large SVG inside of my paperJS canvas which extends out past the canvas bounds.
When I try to pan it by pressing shift and dragging the mouse the svg moves but ultimately snaps to a specific position and responds but always pings back to this place after that
javascript html css svg paperjs
asked Nov 9 at 12:06
Scott Anderson
879
Please, replacehttp://localhost:8080/PCB-trace.svgwith a path to the file you intend to use. You can try using a service like svgur.com to host the file.
– Ismael Miguel
Nov 9 at 12:10
I can't actually get my example to workLooks like SO snippets are down atm. For me I'm getting a 503 (service unavailable).
– Keith
Nov 9 at 12:10
Snippet can't work, since you make a call tohttp://localhost:8080/. Please refactor your code so as to make it reproducible.
– Nino Filiu
Nov 9 at 12:11
@NinoFiliu Snippets are down full stop, thehttp://localhost:8080/is of course a problem when snippets are up an running.
– Keith
Nov 9 at 12:12
@Keith indeed, thanks for the info. Your comment was not yet available when i made mine.
– Nino Filiu
Nov 9 at 12:15
|
show 1 more comment
up vote
1
down vote
favorite
up vote
1
down vote
favorite
var path = new Path.Circle({
center: view.center,
radius: 10,
strokeColor: 'red',
strokeWidth: 3,
applyMatrix: false,
strokeScaling: false
});
var svgItem;
project.importSVG("https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=", {
onLoad : function (item) {
item.center = view.center;
svgItem = item;
}
});
console.log(svgItem);
tool.onMouseMove = function(event) {
//on mouse move the position of 'path' var changes to underneath cursor again
path.position = event.point;
//console.log(event.point); //debug
}
var toolSize = document.getElementById("tool");
console.log(toolSize);
toolSize.addEventListener("change", function(event) {
console.log("Radius slider change detected! " + event.target.value + ". path.radius is: " + path.bounds.width);
//path.radius = event.target.value;
path.scaling = this.value;
});
tool.onMouseDrag = function(event) {
//test to see of the shift key was held whilst a mouse drag action was peformed
if (event.modifiers.shift)
{
//move the image the distance of the mouse drag
svgItem.position = view.center + event.delta;
}
}body,
html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
min-height: 100%;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href="svg_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" id="toolSize" />
<input id="smooth" type="range" name="flatten" min="1" max="10" value="1" step="1" id="smooth" />
<input id="flatten" type="range" name="flatten" min="1" max="10" value="1" step="1" id="flatten" />
</div>
<main>
<canvas id="canvas" resize></canvas>
</main>
<script type="text/paperscript" src="paper_script.js" canvas="canvas">
</script>
</body>
</html>I can't actually get my example to work anywhere except for on localhost but I have a large SVG inside of my paperJS canvas which extends out past the canvas bounds.
When I try to pan it by pressing shift and dragging the mouse the svg moves but ultimately snaps to a specific position and responds but always pings back to this place after that
javascript html css svg paperjs
asked Nov 9 at 12:06
Scott Anderson
879
var path = new Path.Circle({
center: view.center,
radius: 10,
strokeColor: 'red',
strokeWidth: 3,
applyMatrix: false,
strokeScaling: false
});
var svgItem;
project.importSVG("https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=", {
onLoad : function (item) {
item.center = view.center;
svgItem = item;
}
});
console.log(svgItem);
tool.onMouseMove = function(event) {
//on mouse move the position of 'path' var changes to underneath cursor again
path.position = event.point;
//console.log(event.point); //debug
}
var toolSize = document.getElementById("tool");
console.log(toolSize);
toolSize.addEventListener("change", function(event) {
console.log("Radius slider change detected! " + event.target.value + ". path.radius is: " + path.bounds.width);
//path.radius = event.target.value;
path.scaling = this.value;
});
tool.onMouseDrag = function(event) {
//test to see of the shift key was held whilst a mouse drag action was peformed
if (event.modifiers.shift)
{
//move the image the distance of the mouse drag
svgItem.position = view.center + event.delta;
}
}body,
html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
min-height: 100%;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href="svg_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" id="toolSize" />
<input id="smooth" type="range" name="flatten" min="1" max="10" value="1" step="1" id="smooth" />
<input id="flatten" type="range" name="flatten" min="1" max="10" value="1" step="1" id="flatten" />
</div>
<main>
<canvas id="canvas" resize></canvas>
</main>
<script type="text/paperscript" src="paper_script.js" canvas="canvas">
</script>
</body>
</html>I can't actually get my example to work anywhere except for on localhost but I have a large SVG inside of my paperJS canvas which extends out past the canvas bounds.
When I try to pan it by pressing shift and dragging the mouse the svg moves but ultimately snaps to a specific position and responds but always pings back to this place after that
var path = new Path.Circle({
center: view.center,
radius: 10,
strokeColor: 'red',
strokeWidth: 3,
applyMatrix: false,
strokeScaling: false
});
var svgItem;
project.importSVG("https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=", {
onLoad : function (item) {
item.center = view.center;
svgItem = item;
}
});
console.log(svgItem);
tool.onMouseMove = function(event) {
//on mouse move the position of 'path' var changes to underneath cursor again
path.position = event.point;
//console.log(event.point); //debug
}
var toolSize = document.getElementById("tool");
console.log(toolSize);
toolSize.addEventListener("change", function(event) {
console.log("Radius slider change detected! " + event.target.value + ". path.radius is: " + path.bounds.width);
//path.radius = event.target.value;
path.scaling = this.value;
});
tool.onMouseDrag = function(event) {
//test to see of the shift key was held whilst a mouse drag action was peformed
if (event.modifiers.shift)
{
//move the image the distance of the mouse drag
svgItem.position = view.center + event.delta;
}
}body,
html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
min-height: 100%;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href="svg_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" id="toolSize" />
<input id="smooth" type="range" name="flatten" min="1" max="10" value="1" step="1" id="smooth" />
<input id="flatten" type="range" name="flatten" min="1" max="10" value="1" step="1" id="flatten" />
</div>
<main>
<canvas id="canvas" resize></canvas>
</main>
<script type="text/paperscript" src="paper_script.js" canvas="canvas">
</script>
</body>
</html>var path = new Path.Circle({
center: view.center,
radius: 10,
strokeColor: 'red',
strokeWidth: 3,
applyMatrix: false,
strokeScaling: false
});
var svgItem;
project.importSVG("https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=", {
onLoad : function (item) {
item.center = view.center;
svgItem = item;
}
});
console.log(svgItem);
tool.onMouseMove = function(event) {
//on mouse move the position of 'path' var changes to underneath cursor again
path.position = event.point;
//console.log(event.point); //debug
}
var toolSize = document.getElementById("tool");
console.log(toolSize);
toolSize.addEventListener("change", function(event) {
console.log("Radius slider change detected! " + event.target.value + ". path.radius is: " + path.bounds.width);
//path.radius = event.target.value;
path.scaling = this.value;
});
tool.onMouseDrag = function(event) {
//test to see of the shift key was held whilst a mouse drag action was peformed
if (event.modifiers.shift)
{
//move the image the distance of the mouse drag
svgItem.position = view.center + event.delta;
}
}body,
html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
min-height: 100%;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href="svg_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" id="toolSize" />
<input id="smooth" type="range" name="flatten" min="1" max="10" value="1" step="1" id="smooth" />
<input id="flatten" type="range" name="flatten" min="1" max="10" value="1" step="1" id="flatten" />
</div>
<main>
<canvas id="canvas" resize></canvas>
</main>
<script type="text/paperscript" src="paper_script.js" canvas="canvas">
</script>
</body>
</html>javascript html css svg paperjs
javascript html css svg paperjs
asked Nov 9 at 12:06
Scott Anderson
879
asked Nov 9 at 12:06
Scott Anderson
879
edited Nov 10 at 18:41
asked Nov 9 at 12:06
Scott Anderson
879
asked Nov 9 at 12:06
Scott Anderson
879
asked Nov 9 at 12:06
Scott Anderson
879
879
Please, replacehttp://localhost:8080/PCB-trace.svgwith a path to the file you intend to use. You can try using a service like svgur.com to host the file.
– Ismael Miguel
Nov 9 at 12:10
I can't actually get my example to workLooks like SO snippets are down atm. For me I'm getting a 503 (service unavailable).
– Keith
Nov 9 at 12:10
Snippet can't work, since you make a call tohttp://localhost:8080/. Please refactor your code so as to make it reproducible.
– Nino Filiu
Nov 9 at 12:11
@NinoFiliu Snippets are down full stop, thehttp://localhost:8080/is of course a problem when snippets are up an running.
– Keith
Nov 9 at 12:12
@Keith indeed, thanks for the info. Your comment was not yet available when i made mine.
– Nino Filiu
Nov 9 at 12:15
|
show 1 more comment
Please, replacehttp://localhost:8080/PCB-trace.svgwith a path to the file you intend to use. You can try using a service like svgur.com to host the file.
– Ismael Miguel
Nov 9 at 12:10
I can't actually get my example to workLooks like SO snippets are down atm. For me I'm getting a 503 (service unavailable).
– Keith
Nov 9 at 12:10
Snippet can't work, since you make a call tohttp://localhost:8080/. Please refactor your code so as to make it reproducible.
– Nino Filiu
Nov 9 at 12:11
@NinoFiliu Snippets are down full stop, thehttp://localhost:8080/is of course a problem when snippets are up an running.
– Keith
Nov 9 at 12:12
@Keith indeed, thanks for the info. Your comment was not yet available when i made mine.
– Nino Filiu
Nov 9 at 12:15
Please, replace
http://localhost:8080/PCB-trace.svg with a path to the file you intend to use. You can try using a service like svgur.com to host the file.– Ismael Miguel
Nov 9 at 12:10
Please, replace
http://localhost:8080/PCB-trace.svg with a path to the file you intend to use. You can try using a service like svgur.com to host the file.– Ismael Miguel
Nov 9 at 12:10
I can't actually get my example to work Looks like SO snippets are down atm. For me I'm getting a 503 (service unavailable).– Keith
Nov 9 at 12:10
I can't actually get my example to work Looks like SO snippets are down atm. For me I'm getting a 503 (service unavailable).– Keith
Nov 9 at 12:10
Snippet can't work, since you make a call to
http://localhost:8080/. Please refactor your code so as to make it reproducible.– Nino Filiu
Nov 9 at 12:11
Snippet can't work, since you make a call to
http://localhost:8080/. Please refactor your code so as to make it reproducible.– Nino Filiu
Nov 9 at 12:11
@NinoFiliu Snippets are down full stop, the
http://localhost:8080/ is of course a problem when snippets are up an running.– Keith
Nov 9 at 12:12
@NinoFiliu Snippets are down full stop, the
http://localhost:8080/ is of course a problem when snippets are up an running.– Keith
Nov 9 at 12:12
@Keith indeed, thanks for the info. Your comment was not yet available when i made mine.
– Nino Filiu
Nov 9 at 12:15
@Keith indeed, thanks for the info. Your comment was not yet available when i made mine.
– Nino Filiu
Nov 9 at 12:15
|
show 1 more comment
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
Your error is in this line:
svgItem.position = view.center + event.delta;
Inside of a mousedrag event handler function, event.delta is actually representing the vector between the last point and the current point. You were wrongly calculating the desired position by simply adding this vector to view center point.
What you want to do instead, is add this vector to item current position.
svgItem.position += event.delta;
Here is a sketch demonstrating the solution.
// draw a circle
var item = new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
// on mouse drag...
function onMouseDrag(event) {
// ...if shift is pressed...
if (event.modifiers.shift) {
// ...move item
item.position += event.delta;
}
}
// display instructions
new PointText({
content: 'press shift and drag to move the circle',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 9 at 12:46
sasensi
685114
I am not sure exactly why it was giving me the behaviour it did but thankyou nonetheless!
– Scott Anderson
Nov 9 at 20:07
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
Your error is in this line:
svgItem.position = view.center + event.delta;
Inside of a mousedrag event handler function, event.delta is actually representing the vector between the last point and the current point. You were wrongly calculating the desired position by simply adding this vector to view center point.
What you want to do instead, is add this vector to item current position.
svgItem.position += event.delta;
Here is a sketch demonstrating the solution.
// draw a circle
var item = new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
// on mouse drag...
function onMouseDrag(event) {
// ...if shift is pressed...
if (event.modifiers.shift) {
// ...move item
item.position += event.delta;
}
}
// display instructions
new PointText({
content: 'press shift and drag to move the circle',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 9 at 12:46
sasensi
685114
I am not sure exactly why it was giving me the behaviour it did but thankyou nonetheless!
– Scott Anderson
Nov 9 at 20:07
add a comment |
up vote
2
down vote
accepted
Your error is in this line:
svgItem.position = view.center + event.delta;
Inside of a mousedrag event handler function, event.delta is actually representing the vector between the last point and the current point. You were wrongly calculating the desired position by simply adding this vector to view center point.
What you want to do instead, is add this vector to item current position.
svgItem.position += event.delta;
Here is a sketch demonstrating the solution.
// draw a circle
var item = new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
// on mouse drag...
function onMouseDrag(event) {
// ...if shift is pressed...
if (event.modifiers.shift) {
// ...move item
item.position += event.delta;
}
}
// display instructions
new PointText({
content: 'press shift and drag to move the circle',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 9 at 12:46
sasensi
685114
I am not sure exactly why it was giving me the behaviour it did but thankyou nonetheless!
– Scott Anderson
Nov 9 at 20:07
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
Your error is in this line:
svgItem.position = view.center + event.delta;
Inside of a mousedrag event handler function, event.delta is actually representing the vector between the last point and the current point. You were wrongly calculating the desired position by simply adding this vector to view center point.
What you want to do instead, is add this vector to item current position.
svgItem.position += event.delta;
Here is a sketch demonstrating the solution.
// draw a circle
var item = new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
// on mouse drag...
function onMouseDrag(event) {
// ...if shift is pressed...
if (event.modifiers.shift) {
// ...move item
item.position += event.delta;
}
}
// display instructions
new PointText({
content: 'press shift and drag to move the circle',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 9 at 12:46
sasensi
685114
Your error is in this line:
svgItem.position = view.center + event.delta;
Inside of a mousedrag event handler function, event.delta is actually representing the vector between the last point and the current point. You were wrongly calculating the desired position by simply adding this vector to view center point.
What you want to do instead, is add this vector to item current position.
svgItem.position += event.delta;
Here is a sketch demonstrating the solution.
// draw a circle
var item = new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
// on mouse drag...
function onMouseDrag(event) {
// ...if shift is pressed...
if (event.modifiers.shift) {
// ...move item
item.position += event.delta;
}
}
// display instructions
new PointText({
content: 'press shift and drag to move the circle',
point: view.center + [0, -50],
justification: 'center'
});
answered Nov 9 at 12:46
sasensi
685114
answered Nov 9 at 12:46
sasensi
685114
answered Nov 9 at 12:46
sasensi
685114
answered Nov 9 at 12:46
sasensi
685114
685114
I am not sure exactly why it was giving me the behaviour it did but thankyou nonetheless!
– Scott Anderson
Nov 9 at 20:07
add a comment |
I am not sure exactly why it was giving me the behaviour it did but thankyou nonetheless!
– Scott Anderson
Nov 9 at 20:07
I am not sure exactly why it was giving me the behaviour it did but thankyou nonetheless!
– Scott Anderson
Nov 9 at 20:07
I am not sure exactly why it was giving me the behaviour it did but thankyou nonetheless!
– Scott Anderson
Nov 9 at 20:07
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53225436%2fproblems-panning-large-svg-in-paperjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please, replace
http://localhost:8080/PCB-trace.svgwith a path to the file you intend to use. You can try using a service like svgur.com to host the file.– Ismael Miguel
Nov 9 at 12:10
I can't actually get my example to workLooks like SO snippets are down atm. For me I'm getting a 503 (service unavailable).– Keith
Nov 9 at 12:10
Snippet can't work, since you make a call to
http://localhost:8080/. Please refactor your code so as to make it reproducible.– Nino Filiu
Nov 9 at 12:11
@NinoFiliu Snippets are down full stop, the
http://localhost:8080/is of course a problem when snippets are up an running.– Keith
Nov 9 at 12:12
@Keith indeed, thanks for the info. Your comment was not yet available when i made mine.
– Nino Filiu
Nov 9 at 12:15