用动力学涂料涂料 [英] paint application with kinetic js
问题描述
我使用kinetic js在HTML5画布中制作了一个拖放应用程序。我们还可以使用kinetic js将画笔功能添加到同一画布中吗？如果是，请分享一个此类应用程序的链接，如果可能的话还要分享代码。
I have made a drag and drop application in HTML5 canvas with kinetic js. Can we also add the paint brush functionality to the same canvas using kinetic js? If yes, please share the link for one such application, and also the code, if possible.
推荐答案
您可以使用鼠标事件让用户在画布上创建草图。
You can use mouse events to let the user create a sketch on the canvas.
以下是如何让用户创建动力学折线。
Here's how to let the user create a Kinetic polyline.
On mousedown：
On mousedown:
- 将mousedown标志设置为true（表示用户正在绘制草图）
- 创建一个新的Kinetic Line对象
在mousemove上：
On mousemove:
- 将当前鼠标位置添加到线对象中的点
- 重绘现在包含最新鼠标位置的行
在鼠标上：
- 清除mousedown标志。
每次用户草绘新的折线时重复。
Repeat every time the user sketches a new polyline.
让用户绘制其他动力学形状（rect ，圈等等）你有很多选择：
To let the user draw other Kinetic shapes (rect,circle,etc.) you have many options:
让用户选择哪一个他们想要创造的形状。使用mousedown + mouseup获取所需形状的边界。然后将那些动态形状添加到舞台上。
Have the user select which shape they want to create. Use mousedown + mouseup to get the bounds of the shape they want. Then add that kinetic shape with those bounds to the stage.
OR
让用户选择他们的形状想要创造。创建该形状的通用版本并将其放在舞台上。让用户将通用形状拖动到所需位置。让用户通过拖动边界锚点来自定义该通用形状。
Have the user select which shape they want to create. Create a generic version of that shape and put it on the stage. Let the user drag the generic shape to their desired position. Let the user customize that generic shape by dragging the bounds anchors.
OR
让用户选择他们想要创建的形状并让文本输入边界。创建该形状的通用版本并将其放在舞台上。让用户将通用形状拖动到所需位置。
Have the user select which shape they want to create and have them text input the bounds. Create a generic version of that shape and put it on the stage. Let the user drag the generic shape to their desired position.
真的，有很多选项可供设计使用。
Really, there are so many options that the design is up to you.
这是代码和小提琴： 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>
这篇关于用动力学涂料涂料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
