Paper js 'dot' 路径显示在 firefox 中但不在 IE 或 Chrome 中

Question

使用论文 js sketch 中的代码 here 我能够看到通过简单地单击而无需移动鼠标而绘制的点。您还可以看到该元素实际上已添加到所有 3 个浏览器中。但是，Chrome 和 IE 不显示该元素，我无法理解为什么。

// The minimum distance the mouse has to drag
// before firing the next onMouseDrag event:
tool.minDistance = 1;
tool.maxDistance = 1;

function onMouseDown(e) {
    // Create a new path and give it a stroke color:
    path = new Path();
    path.strokeColor = 'black';
    path.strokeWidth = 2;
    // Add a segment to the path where
    // you clicked:
    path.add(e.point);
}

function onMouseDrag(e) {
    var top = e.middlePoint;
    var bottom = e.middlePoint;
    path.add(top);
    path.insert(0, bottom);
}

function onMouseUp(e) {
    var pt = e.point;
    path.add(pt);
    path.closed = true;
    console.log(path);
}

Answer 1

已收到 Jürg Lehni 的回复

It's probably a difference of the underlying rendering system, but an open path with only one segment should simply not be rendered, something that we should handle in the library internally.

A closed path should be rendered if it defines handles, as that can actually be a tiny little loop.

我必须设置特定的行为来处理点路径。在我的例子中，我使用了圆圈。

Answer 2

我是这样解决的：

    function onMouseUp(e) {
        var pt = e.point;
        if (path.segments.length < 2) {
           // draw a dot
           pt.y ++;
        }

        path.add(pt);
        path.closed = true;
        console.log(path);
    }

Paper js 'dot' 路径显示在 firefox 中但不在 IE 或 Chrome 中

Paper js 'dot' paths showing up in firefox but not in IE or Chrome

html

javascript

canvas

paperjs