Question

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

设置

draggable: true

不起作用。我猜这是因为我们正在重写鼠标和鼠标事件？这里的my attempt采用了不同的方法，但也不起作用 -

<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>

Answer 1

切换到FabricJS。以下小提琴显示了我想要做的事情：

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

updateComplexity();

照顾它。

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

1 个答案: