嗨,我正在寻找使用 JavaScript 制作平面图编辑器(类似于 MsPaint)。我已将EaselJS或KinetiJS列为我的首选库。
我想知道如何使用这些库创建一个动态矩形框/线。我打算通过单击鼠标并拖动它来绘制一个矩形(同时按住鼠标按钮)。因此,矩形的大小将取决于鼠标拖动的距离。
任何帮助将不胜感激。如果有人觉得像fabrisJs或paperJs这样的任何其他库会是更好的选择,那么我也对这些库中的解决方案持开放态度。
嗨,我正在寻找使用 JavaScript 制作平面图编辑器(类似于 MsPaint)。我已将EaselJS或KinetiJS列为我的首选库。
我想知道如何使用这些库创建一个动态矩形框/线。我打算通过单击鼠标并拖动它来绘制一个矩形(同时按住鼠标按钮)。因此,矩形的大小将取决于鼠标拖动的距离。
任何帮助将不胜感激。如果有人觉得像fabrisJs或paperJs这样的任何其他库会是更好的选择,那么我也对这些库中的解决方案持开放态度。
好的...通过反复试验以及大量谷歌搜索和重用网络代码,我得到了 KineticJs 的答案。
这是完整的解决方案:
http://jsfiddle.net/sandeepy02/8kGVD/
<html>
<head>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
layer.add(background);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect= new Kinetic.Rect({
x: 22,
y: 7,
width: 0,
height: 0,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
//start point and end point are the same
rect.setX(mousePos.x);
rect.setY(mousePos.y);
rect.setWidth(0);
rect.setHeight(0);
moving = true;
layer.drawScene();
}
});
stage.on("mousemove", function(){
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
rect.setWidth(mousePos.x-rect.getX());
rect.setHeight(mousePos.y-rect.getY());
moving = true;
layer.drawScene();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>