KineticJS -创建一个可拖动的线使用鼠标

KineticJS - Creating a draggable line using mouse

本文关键字：拖动 鼠标 一个 创建 KineticJS      更新时间：2023-09-26

我试图在有界区域内创建一条线，一旦在图层上绘制，也可以拖动它。虽然有动态创建线条的解决方案- http://jsfiddle.net/42RHD/65/，但我还需要它们在画布周围可拖动。

设置
draggable: true

不起作用。我猜是因为我们重写了鼠标上下事件?这是我尝试的另一种方法，也不起作用- 

<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script defer="defer">
    var x1, y1, x2, y2
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 700,
        height: 700
    });
    var layer = new Kinetic.Layer();
    var line = new Kinetic.Line({
        y: 0,
        points: [x1, y1, x2, y2],
        stroke: 'black',
        strokeWidth: 5,
        lineCap: 'round',
        lineJoin: 'round',
        draggable: true
    });
    var bounds = new Kinetic.Rect({
        x: 50,
        y: 50,
        width: 600,
        height: 600,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 4
    });
    layer.add(bounds);
    layer.add(line);
    stage.add(layer);
    bounds.on('mousedown', function() {
        var start = stage.getPointerPosition();
        x1 = start.x - 190;
        y1 = start.y - 40;
    });
    bounds.on('mouseup', function() {
        var end = stage.getPointerPosition();
        x2 = end.x - 190;
        y2 = end.y - 40;
        line.draw();
    });
</script>

切换到FabricJS。下面的代码显示了我想要做的事情:

http://jsfiddle.net/RDqTd/27/

updateComplexity();

相关文章：