我用动态 js 在 HTML5 画布中制作了一个拖放应用程序。我们还可以使用动态 js 将画笔功能添加到同一画布吗?如果是,请分享一个此类应用程序的链接,如果可能的话,还请分享代码。
问问题
1429 次
2 回答
1
您可以使用鼠标事件让用户在画布上创建草图。
以下是如何让用户创建动力学折线。
在鼠标按下时:
- 将 mousedown 标志设置为 true(表示用户正在绘制草图)
- 创建一个新的动力学线对象
在鼠标移动时:
- 将当前鼠标位置添加到线对象中的点
- 重新绘制现在包含最新鼠标位置的线
在鼠标上:
- 清除 mousedown 标志。
每次用户绘制新的多段线时重复。
要让用户绘制其他动力学形状(矩形、圆形等),您有很多选择:
让用户选择他们想要创建的形状。使用 mousedown + mouseup 来获得他们想要的形状的边界。然后将具有这些边界的动态形状添加到舞台。
或者
让用户选择他们想要创建的形状。创建该形状的通用版本并将其放在舞台上。让用户将通用形状拖动到他们想要的位置。让用户通过拖动边界锚点来自定义该通用形状。
或者
让用户选择他们想要创建的形状并让他们在文本中输入边界。创建该形状的通用版本并将其放在舞台上。让用户将通用形状拖动到他们想要的位置。
真的,有很多选择,设计取决于你。
这是代码和小提琴:http: //jsfiddle.net/m1erickson/WW3sK/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
// create a stage and a layer
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
// an empty stage does not emit mouse-events
// so fill the stage with a background rectangle
// that can emit mouse-events
var background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: 'white',
stroke: 'black',
strokeWidth: 1,
})
layer.add(background);
layer.draw();
// a flag we use to see if we're dragging the mouse
var isMouseDown=false;
// a reference to the line we are currently drawing
var newline;
// a reference to the array of points making newline
var points=[];
// on the background
// listen for mousedown, mouseup and mousemove events
background.on('mousedown', function(){onMousedown();});
background.on('mouseup', function(){onMouseup();});
background.on('mousemove', function(){onMousemove();});
// On mousedown
// Set the isMouseDown flag to true
// Create a new line,
// Clear the points array for new points
// set newline reference to the newly created line
function onMousedown(event) {
isMouseDown = true;
points=[];
points.push(stage.getMousePosition());
var line = new Kinetic.Line({
points: points,
stroke: "green",
strokeWidth: 5,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
newline=line;
}
// on mouseup end the line by clearing the isMouseDown flag
function onMouseup(event) {
isMouseDown=false;
}
// on mousemove
// Add the current mouse position to the points[] array
// Update newline to include all points in points[]
// and redraw the layer
function onMousemove(event) {
if(!isMouseDown){return;};
points.push(stage.getMousePosition());
newline.setPoints(points);
layer.drawScene();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
于 2013-05-23T19:55:56.743 回答
0
几周前我做了一些事情。不知道能不能帮到你。
var x;
var y;
var entry;
var isFinished = false;
circle.on('dragstart', function(evt) {
entry = new Kinetic.Circle({
x: evt.x,
y: evt.y,
radius: 10,
fill: 'red',
stroke: 'black',
strokeWidth: 2
});
group.add(entry);
layer.add(group);
entry.moveToTop();
});
circle.on('dragmove', function(evt) {
if (isFinished) return;
if (x != undefined && y != undefined) {
var line = new Kinetic.Line({
points: [x, y, evt.x, evt.y],
stroke: 'red',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round'
});
length += Math.sqrt(Math.pow(evt.x - x, 2) + Math.pow(evt.y - y, 2));
group.add(line);
}
x = evt.x;
y = evt.y;
layer.add(group);
circle.moveToTop();
entry.moveToTop();
layer.draw();
if (length > 120) circle.fire('dragend');
});
circle.on('dragend', function(evt) {
if (isFinished) return;
var exit = new Kinetic.Circle({
x: x,
y: y,
radius: 10,
fill: 'red',
stroke: 'black',
strokeWidth: 2
});
group.add(exit);
layer.add(group);
circle.hide();
layer.draw();
isFinished = true;
});
那是您正在寻找的行为吗?在这里,出于某些原因,我想限制长度,但您可以轻松删除此限制。
于 2013-05-23T14:03:29.033 回答