Question

我使用paperJS创建了一个简单的图像标记。现在我必须添加一个撤销选项，创建我需要存储所有坐标位置和一个撤消按钮。我怎么能这样做任何人都可以帮助我。这是我的剧本。

function onMouseDrag(event) {
            if(set == 1){
                    path = new Path.Circle({
                        center: event.point,
                        radius: (event.downPoint - event.point).length,
                        fillColor: null,
                        strokeColor: '#e9e9ff',
                        strokeWidth: 1
                    });
            }else if(set == 2){
                var rectangle = new Rectangle(event.point, event.downPoint);
                var path = new Path.Rectangle(rectangle);
                path.fillColor = null;
                path.strokeColor = '#e9e9ff';
                path.strokeWidth = 1;   
            }else if(set == 3){
                var path = new Path.Line({
                        from: event.point,
                        to : event.downPoint,
                        strokeColor: 'black'
                    });
            }else if(set == 4){
                        var path = new PointText({
                        point: event.point,
                        content: 'The contents of the point text',
                        fillColor: 'black',
                        fontSize: 25
                    }); 
            }
                  path.removeOnDrag();
        };

        function onMouseUp(event) {
                circles.push(path);
        };

这是我的HTML。

<div class="menu-list">
    <input type="button" value="Circle" onClick="return set=1;">
    <input type="button" value="Rectangle" onClick="return set=2;">
    <input type="button" value="Line" onClick="return set=3;">
    <input type="button" value="Text" onClick="return set=4;">
</div>
<div class="img-mark">
    <canvas id="canvas" resize></canvas>
</div>
<div class="mark-list">

</div>

Answer 1

我不太确定，如果我明白你想要什么，但试试这个：您可以借助hitResult选择特定的路径或形状：

var hitResult = project.hitTest(event.point, hitOptions);
if (!hitResult) {
    return;
} else {
    path = hitResult.item;
}

请参阅此示例：http://paperjs.org/examples/hit-testing/
然后，当用户点击删除

时，您可以拨打path.remove()（http://paperjs.org/reference/path）

PS：您应该查看http://paperjs.org/reference/tool，而不是使用set == x。您可以使用circleTool = new Tool();定义不同的工具，而不是调用circleTool.activate()和circleTool.onMouseDown = function() {...}

纸JS获取形状坐标（圆形，矩形等）

1 个答案: