140 lines
4.1 KiB
HTML
140 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<script src="jquery-2.1.0.min.js"></script>
|
|
<script type="text/javascript" src="paperjs-v0.12.15/docs/assets/js/paper.js"></script>
|
|
</head>
|
|
<body>
|
|
<canvas id="myCanvas" style="border:5px solid rgb(153, 153, 153);background:white;width:1550px;height:730px;" width="1550px" height="730px"></canvas>
|
|
</body>
|
|
<script type="text/javascript">
|
|
// 创建画布并设置大小
|
|
var canvas = document.getElementById('myCanvas');
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
// 初始化 Paper.js
|
|
paper.setup(canvas);
|
|
|
|
// 定义线条对象
|
|
function LineObject() {
|
|
this.line = new paper.Path(); // 创建路径对象
|
|
}
|
|
LineObject.prototype.draw = function (startPoint, endPoint) {
|
|
this.line.add(new paper.Point(startPoint)); // 添加起始点到路径上
|
|
this.line.add(new paper.Point(endPoint)); // 添加结束点到路径上
|
|
};
|
|
|
|
|
|
var path = new paper.Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new paper.Point(50, 50));
|
|
path.add(new paper.Point(200, 200));
|
|
path.strokeWidth = 5
|
|
|
|
var path1 = new paper.Path();
|
|
path1.strokeColor = 'black';
|
|
path1.add(new paper.Point(300, 300));
|
|
path1.add(new paper.Point(400, 200));
|
|
path1.strokeWidth = 5
|
|
|
|
var path2 = new paper.Path();
|
|
path2.strokeColor = 'black';
|
|
path2.add(new paper.Point(500, 500));
|
|
path2.add(new paper.Point(600, 200));
|
|
path2.strokeWidth = 5
|
|
|
|
var path3 = new paper.Path();
|
|
path3.strokeColor = 'black';
|
|
path3.add(new paper.Point(200, 50));
|
|
path3.add(new paper.Point(50, 200));
|
|
path3.strokeWidth = 5
|
|
|
|
|
|
|
|
// 当鼠标按下时进行处理
|
|
canvas.addEventListener('mousedown', function (event) {
|
|
var zoom = 0.8;
|
|
var value = 400;
|
|
var aa = 186;
|
|
console.log("bb",-(1 - zoom) * value);
|
|
console.log("aaaaa",aa + -(1 - zoom) * value);
|
|
|
|
var mousePos = eventToMousePosition(event); // 将事件转换为鼠标位置
|
|
console.log('event=',event)
|
|
|
|
var clientX = event.clientX;
|
|
var clientY = event.clientY;
|
|
|
|
// 获取所有线条对象
|
|
var lines = [];
|
|
for (var i in paper.project.layers[0].children) {
|
|
if (paper.project.layers[0].children[i] instanceof paper.Path && !paper.project.layers[0].children[i].selected) {
|
|
|
|
paper.project.layers[0].children[i].strokeColor = 'black';
|
|
lines.push(paper.project.layers[0].children[i]);
|
|
}
|
|
}
|
|
// 根据鼠标位置查询是否有线条被选中
|
|
|
|
var hitResult = false;
|
|
for (var j in lines) {
|
|
console.log('lines=',lines);
|
|
console.log('lines[j].segments=',lines[j].segments);
|
|
|
|
// var paths = lines[j];
|
|
|
|
// var topX = paths.segments[0].point.x;
|
|
// var topY = paths.segments[0].point.y;
|
|
// var botX = paths.segments[1].point.x;
|
|
// var botY = paths.segments[1].point.y;
|
|
// var maxX,minX,maxY,minY;
|
|
|
|
// maxX = Math.max(topX,botX)
|
|
// minX = Math.min(topX,botX)
|
|
// maxY = Math.max(topY,botY)
|
|
// minY = Math.min(topY,botY)
|
|
|
|
// if(minX-10 <= clientX && clientX <= maxX+10 && minY-10 <= clientY && clientY <= maxY+10){
|
|
|
|
// hitResult = true;
|
|
// }
|
|
|
|
hitResult = lines[j].hitTest(mousePos);
|
|
if (hitResult) {
|
|
paper.project.layers[0].children[j].strokeColor = 'red';
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 若有线条被选中，则修改其样式或者执行其他操作
|
|
if (hitResult) {
|
|
|
|
|
|
var from = [200, 50];
|
|
var to = [50, 200];
|
|
|
|
paper.project.activeLayer.children.forEach(function(item) {
|
|
if (item instanceof paper.Path && item.bounds.contains(from) && item.bounds.contains(to)) {
|
|
item.remove();
|
|
}
|
|
});
|
|
|
|
// 这里可以编写自己想要执行的代码
|
|
} else {
|
|
console.log("没有线条被选中");
|
|
}
|
|
});
|
|
|
|
// 将事件转换为鼠标位置
|
|
function eventToMousePosition(event) {
|
|
return new paper.Point(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</html> |