Javascript 使用paperJS重新调整圆的大小

我试图使用papeJS重新调整一个圆的大小，但由于我在mousedrag上使用了两个

函数，因此如果冲突，请使用它。我无法创建它。有人能帮我吗

这是代码

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


var raster=新光栅({
资料来源：“菊花.jpg”，
位置：view.center
});
var path=null；
var循环=[]；
var isDrawing=错误；
变量DragginIndex=-1；
var段，movePath；
var resize=false；
project.activeLayer.selected=false；
函数onMouseDrag（事件）{
如果（！isDrawing&&circles.length>0）{
对于（var ix=0；ix-1）{
圆[DragginIndex]。位置=事件点；
}否则{
路径=新路径。圆({
中心：event.point，
半径：（event.downPoint-event.point）。长度，
fillColor:null，
strokeColor:'黑色'，
冲程宽度：10
});
path.removeOnDrag（）；
isDrawing=true；
}
}
;
函数onMouseUp（事件）{
if（isDrawing）{
圆。推（路径）；
}
isDrawing=false；
DragginIndex=-1；
}
;
mouseMove函数（事件）{
project.activeLayer.selected=false；
如果（事件项）
event.item.selected=true；
调整大小=真；
}
var段，路径；
var movePath=false；
函数onMouseDown（事件）{
段=路径=空；
var hitResult=project.hitTest（event.point，hitOptions）；
如果（！hitResult）
返回；
如果（结果）{
path=hitsult.item；
如果（hitResult.type=='segment'）{
段=hitResult.segment；
}else if（hitResult.type=='stroke'）{
var位置=hitResult.location；
段=路径.insert（location.index+1，event.point）；
path.smooth（）；
}
}
movePath=hitResult.type=='fill'；
如果（移动路径）
project.activeLayer.addChild（hitResult.item）；
}
首先，您的代码（在JSFIDLE上）没有运行

paperjs外部资源返回了404。为paperjs工作
光栅源用于本地文件，而不是URI
在onMouseDown中，
project.hitTest
引用未定义的
hitOptions
从您的问题来看，您似乎希望能够拖动圆段来调整圆的大小，并且您尝试使用两个
onMouseDrag
函数来执行此操作，但这不起作用。相反，这两个操作应该在相同的
onMouseDrag
中，使用if-then-else在它们之间进行选择。要使此项按预期工作，命中的项目应存储在
onMouseDown
中，而不是代码在
onMouseDrag
开头找到的任何圆圈中。例如，此处的
onMouseDrag
可以“移动”或“调整大小”（）：


var raster=新光栅({
资料来源:'http://i140.photobucket.com/albums/r10/Array39/Chrysanthemum.jpg',
位置：view.center
});
var循环=[]；
var-hitItem=null；
var currentAction=null；
mouseMove函数（事件）{
project.activeLayer.selected=false；
如果（事件项）{
event.item.selected=true；
}
}
函数onMouseDown（事件）{
hitItem=null；
var aColor=新颜色（“黑色”）；
对于（变量i=0；i=1）{
fitBounds（新矩形（event.downPoint，event.point），true）；
}
}
};

另请注意：

在
onMouseDown
中，函数返回if
！hitResult
，因此您不需要在返回之后立即测试
if（hitResult）
将变量命名为与对象相同会使搜索更加困难，例如，在代码中
path
是
path
的一个实例
将同一变量用于差分
<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>