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

Question

我有一条如下图所示的线  

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

        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位置的任何建议？谢谢

Answer 1

我可以将线转换为图像：

      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
      });