javascript - 使用 paperJS 调整圆圈大小

Question

我正在尝试使用 papeJS 调整圆圈的大小，但由于我使用了两个 onMouseDrag 函数，所以如果有冲突的话。我无法创建它。谁能帮我。 Here is the fiddle with circle

这是代码。

<script type="text/paperscript" canvas="canvas">
        var raster = new Raster({
            source: 'Chrysanthemum.jpg',
            position: view.center
        });
        var path = null;
        var circles = [];
        var isDrawing = false;
        var draggingIndex = -1;
        var segment, movePath;
        var resize = false;
        project.activeLayer.selected = false;
        function onMouseDrag(event) {
            if (!isDrawing && circles.length > 0) {
                for (var ix = 0; ix < circles.length; ix++) {
                    if (circles[ix].contains(event.point)) {
                        draggingIndex = ix;
                        break;
                    }
                }
            }
            if (draggingIndex > -1) {
                circles[draggingIndex].position = event.point;
            } else {
                path = new Path.Circle({
                    center: event.point,
                    radius: (event.downPoint - event.point).length,
                    fillColor: null,
                    strokeColor: 'black',
                    strokeWidth: 10
                });

                path.removeOnDrag();
                isDrawing = true;
            }
        }
        ;

        function onMouseUp(event) {
            if (isDrawing) {
                circles.push(path);
            }
            isDrawing = false;
            draggingIndex = -1;
        }
        ;

        function onMouseMove(event) {
            project.activeLayer.selected = false;
            if (event.item)
                event.item.selected = true;
            resize = true;
        }

        var segment, path;
        var movePath = false;
        function onMouseDown(event) {
            segment = path = null;
            var hitResult = project.hitTest(event.point, hitOptions);
            if (!hitResult)
                return;

            if (hitResult) {
                path = hitResult.item;
                if (hitResult.type == 'segment') {
                    segment = hitResult.segment;
                } else if (hitResult.type == 'stroke') {
                    var location = hitResult.location;
                    segment = path.insert(location.index + 1, event.point);
                    path.smooth();
                }
            }
            movePath = hitResult.type == 'fill';
            if (movePath)
                project.activeLayer.addChild(hitResult.item);
        }
</script>

Answer 1

首先，您的代码(在 jsfiddle 上)没有运行。

1. paperjs 外部资源返回 404。https://raw.github.com/paperjs/paper.js/master/dist/paper.js适用于 paperjs。
2. 光栅源是针对本地文件的，而不是 URI。
3. 在 onMouseDown 中，project.hitTest 引用了一个未定义的 hitOptions。

从您的问题来看，您似乎希望能够拖动圆段以调整圆的大小，并且您尝试使用两个 onMouseDrag 函数来执行此操作，但这是行不通的。相反，这两个操作应该在同一个 onMouseDrag 中，使用 if-then-else 在它们之间进行选择。要使其按预期工作，被击中的项目应存储在 onMouseDown 中，而不是您的代码在 onMouseDrag 开头找到的任何圆圈。例如，此处 onMouseDrag 可以“移动”或“调整大小”( jsfiddle here ):

<script type="text/paperscript" canvas="myCanvas">
    var raster = new Raster({
        source: 'http://i140.photobucket.com/albums/r10/Array39/Chrysanthemum.jpg',
        position: view.center
    });
    var circles = [];
    var hitItem = null;
    var currentAction = null;

    function onMouseMove(event) {
        project.activeLayer.selected = false;
        if (event.item) {
            event.item.selected = true;
        }
    }

    function onMouseDown(event) {
        hitItem = null;
        var aColor = new Color('black');
        for (var i = 0; i < circles.length; i++) {
            circles[i].fillColor = aColor;
        }
        view.draw();
        var hitResult = project.hitTest(event.point);
        for (var i = 0; i < circles.length; i++) {
            circles[i].fillColor = null;
        }
        view.draw();
        if (!hitResult) {
            return; //only happens if we don't even hit the raster
        }
        hitItem = hitResult.item;
        if (circles.indexOf(hitItem) < 0) {
            var newCircle = new Path.Circle({
                center: event.point,
                radius: 2,
                strokeColor: 'black',
                strokeWidth: 10
            });
            hitItem = newCircle;
            circles.push(hitItem);
            currentAction = 'resize';
            return;
        }
        if (hitResult.type == 'segment') {
            currentAction = 'resize';
        } else if (hitResult.type == 'stroke') {
            hitItem.insert(hitResult.location.index + 1, event.point);
            hitItem.smooth();
            currentAction = 'resize';
        } else if (hitResult.type == 'fill') {
            currentAction = 'move';
        }
    }

    function onMouseDrag(event) {
        if (!hitItem) {
            return;
        }
        if (currentAction == 'move') {
            hitItem.position = event.point;
        } else if (currentAction == 'resize') {
            if ((event.downPoint - event.point).length >= 1) {
            hitItem.fitBounds(new Rectangle(event.downPoint, event.point), true);
            }
        }
    };
</script>
<canvas id="myCanvas"></canvas>

另请注意:

1. 在 onMouseDown 中，该函数返回 if !hitResult，因此您无需在 之后立即测试 if (hitResult) >返回。
2. 将变量命名为与对象相同的名称会使搜索更加困难，例如，在您的代码中，path 是 Path 的一个实例。
3. 为不同的目的使用相同的变量会使代码更难解析，例如，在您的代码中，path 用于创建新的圆圈以及存储已选择的圆圈。
4. 您有多个变量定义了两次:path、movePath 和 segment。
5. 如果变量仅在单个函数中使用，例如，movePath 和 segment，那么如果在该函数中定义变量，代码将更具可读性.此外，movePath 仅在单个 if 语句中使用，它只是将项目添加回图层，但在最初绘制圆时，唯一不在图层中的项目已被删除。由于无法命中这些项目，因此被命中的项目必须已经在图层中。
6. 未使用变量段。
7. 如果功能按逻辑顺序排列，代码会更好地流动/阅读。在这种情况下，onMouseMove 应该首先执行，因为它发生在单击按钮之前。然后是 onMouseDown，因为它必须在其他操作之前发生。然后是 onMouseDrag，最后是 onMouseUp。
8. 与其在 onMouseDrag 中创建新圆圈，然后在下一次拖动时将其丢弃，不如在 onMouseDown 中创建一个更有意义，如果没有项目被点击，或者如果命中项不是圆圈。然后在 onMouseDown 中，您只需调整该圆圈的大小。 Path.scale 或 Path.fitBounds 可用于此类大小调整。
9. 与其使用多个 bool 变量来跟踪当前操作(例如，调整大小与移动)，不如使用单个变量来跟踪当前操作更为合乎逻辑。
10. 而不是你的代码来确定点是否在一个圆圈内，我正在使用的代码临时设置圆圈的 fillColor，进行 hitTest，然后清除圆圈的 fillColor 。我这样做是因为当您击中一笔时，圆的形状会发生变化，而您用于查找 draggingIndex 的代码并没有考虑到这一点。