Angularjs 在Dynamic js v5.0.0中将线转换为图像

我有一行如下所示

行属性是 当我使用以下代码将其转换为图像时

        var nClone=$scope.currLine.clone();  // $scope.currLine has kinetic line info
        $scope.currLine.remove();  // remove form layer as we have its clone
        var pArr=nClone['attrs']['points'];


        var i,wIs,hIs; 
        var xIs=0;
        var yIs=0;

        // to set width and height of image from line points
        var arrLen=pArr.length; 
        for(i=0; i<arrLen;i){
          if(i>=arrLen){
            break;
          }
          wIs=Math.abs(pArr[i]-pArr[i+2]);   // calculating difference
          hIs=Math.abs(pArr[i+1]-pArr[i+3]); 
          i=i+4; 
        }  
        nClone.toImage({ 
          x:xIs,
          y:yIs, 
          width:wIs,
          height:hIs, 
          callback: function(graphicImage){  
            console.log(graphicImage.src);
           }
      });

我得到的印象是

---

我已经尝试了很多把线设置在0,0位置，有什么建议吗？谢谢

我能够将线条转换为图像：

      var line = new Kinetic.Line({
          points: $scope.points,    // any 4 points 10 20 40 50
          stroke: 'green',  
          strokeWidth: '2',
          lineCap: 'round',
          lineJoin: 'round'
      });

      var pArr=line['attrs']['points']; // calculate width and height
      width=Math.abs(pArr[0]-pArr[2]);
      height=Math.abs(pArr[1]-pArr[3]);  

      imgXis=pArr[0]; 
      imgYis=pArr[1];

      var shImage = line.toDataURL({
        x:imgXis,
        y:imgYis, 
        width:width,
        height:height
      }); 

---

你们能创建小提琴吗？我已经创建了相关的场景，若你们能在鼠标上方将线点转换成图像或者你们能将任何运动线转换成图像，那个将不胜感激