使用paperJS绘制多个圈子

如何使用paperjs绘制多个圈子？我尝试删除path.removeOnDrag()它的工作原理和删除fillcolor后，但输出不符合预期。使用paperJS绘制多个圈子

<script type="text/paperscript" canvas="canvas"> 
     function onMouseDrag(event) { 
      // The radius is the distance between the position 
      // where the user clicked and the current position 
      // of the mouse. 
      var path = new Path.Circle({ 
       center: event.downPoint, 
       radius: (event.downPoint - event.point).length, 
       fillColor: null, 
       strokeColor: 'black', 
       strokeWidth: 10 
      }); 

      // Remove this path on the next drag event: 
      path.removeOnDrag(); 
     }; 
</script>

来源

2013-05-31 chiyango

它可以帮助您描述您的期望。代码完全符合它应该做的事情，那么你认为的问题是什么？此外，jsfiddle.net示例可能会有所帮助;在这种情况下，http://jsfiddle.net/vupt3 –

由于[http://jsfiddle.net/vupt3/](http://jsfiddle.net/vupt3/）显示正在输出。如何绘制另一个圈子而不隐藏第一个圈子。 – chiyango

这里一个简单的解决方案： http://jsfiddle.net/vupt3/1/

所以在mouseUp事件，你不仅仅是当前绘制路径存入数组。如果您需要，也可以稍后访问和操作这些环。

// path we are currently drawing 
var path = null; 

// array to store paths (so paper.js would still draw them) 
var circles = []; 
function onMouseDrag(event) { 
    // The radius is the distance between the position 
    // where the user clicked and the current position 
    // of the mouse. 
    path = new Path.Circle({ 
     center: event.downPoint, 
     radius: (event.downPoint - event.point).length, 
     fillColor: null, 
     strokeColor: 'black', 
     strokeWidth: 10 
    }); 

    // Remove this path on the next drag event: 
    path.removeOnDrag(); 

}; 

function onMouseUp(event) { 
    // if mouseUp event fires, save current path into the array 
    circles.push(path); 
};

来源

2013-06-01 05:54:45

谢谢你的工作很棒。有没有任何替代解决方案的IE8。 – chiyango

编号PaperJS不支持IE 8.请阅读更多：http：//stackoverflow.com/questions/10751677/paper-js-with-excanvas –

使用paperJS绘制多个圈子

回答

相关问题