Question

我使用kinetic js在HTML5画布中制作了一个拖放应用程序。我们还可以使用kinetic js将画笔功能添加到同一画布中吗？如果是，请分享一个此类应用程序的链接，以及代码（如果可能）。

Answer 1

您可以使用鼠标事件让用户在画布上创建草图。

以下是如何让用户创建动力学折线。

关于mousedown：

将mousedown标志设置为true（表示用户正在绘制草图）
创建新的Kinetic Line对象

关于mousemove：

将当前鼠标位置添加到线对象中的点
重绘现在包含最新鼠标位置的行

关于mouseup：

清除mousedown旗帜。

每次用户草绘新的折线时重复。

要让用户绘制其他动力学形状（矩形，圆形等），您有很多选择：

让用户选择他们想要创建的形状。使用mousedown + mouseup获取所需形状的边界。然后将那些动态形状与那些边界添加到舞台上。

OR

让用户选择他们想要创建的形状。创建该形状的通用版本并将其放在舞台上。让用户将通用形状拖动到所需位置。让用户通过拖动边界锚点来自定义该通用形状。

OR

让用户选择他们想要创建的形状并让文本输入边界。创建该形状的通用版本并将其放在舞台上。让用户将通用形状拖动到所需位置。

真的，有很多选择，设计取决于你。

这是代码和小提琴：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>

Answer 2

我几周前做过一些事情。我不知道它是否可以帮到你。

http://jsfiddle.net/F3zwW/10/

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;
});

这是您正在寻找的行为吗？在这里，我想出于某些原因限制长度，但您可以轻松地删除此限制。

用动力学涂料涂料

2 个答案: