forked from paperjs/paper.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathComments.html
More file actions
73 lines (66 loc) · 2.55 KB
/
Copy pathComments.html
File metadata and controls
73 lines (66 loc) · 2.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<title></title>
<style media="screen" type="text/css">
.hint {
position: absolute;
font-family: Arial;
}
.modal {
font-family: Arial;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
border: 1px solid #bbb;
background: -webkit-linear-gradient(top, #fff, #ddd);
background: -moz-linear-gradient(top, #fff, #ddd);
background: linear-gradient(top, #fff, #ddd);
display: inline-block;
padding: 20px 20px 20px 20px;
}
</style>
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript">
paper.install(window);
window.onload = function () {
paper.setup('myCanvas');
// Create a simple drawing tool:
var tool = new Tool();
var path = new Path();
path.strokeColor = 'black';
// Define a mousedown and mousedrag handler
tool.onMouseDown = function (event) {
//Create DOM element somehow
var elementToAdd = document.createElement('div');
elementToAdd.className = 'modal';
elementToAdd.innerHTML = 'Hello, I am DOM scene object.';
var domSceneObject = new DomSceneObject(event.point.x, event.point.y);
domSceneObject.appendChild(elementToAdd);
}
tool.onMouseMove = function (event) {
path.add(event.point);
}
}
if (document.addEventListener) {
if ('onwheel' in document) {
document.addEventListener("wheel", onWheel, false);
} else if ('onmousewheel' in document) {
document.addEventListener("mousewheel", onWheel, false);
} else {
document.addEventListener("MozMousePixelScroll", onWheel, false);
}
} else {
document.attachEvent("onmousewheel", onWheel);
}
function onWheel(e) {
e = e || window.event;
var delta = e.deltaY || e.detail || e.wheelDelta;
paper.view.zoom = paper.view.zoom + (delta * 0.01);
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
</script>
</head>
<body>
<p class="hint">DomSceneObject is a DOM element which sticks to given paper.js scene coordinates.<br> Click to place DOM comment to scene.<br> Mouse wheel to resize. </p>
<canvas id="myCanvas" resize></canvas>
</body>
</html>