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

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

Convert line to image in kinetic js v5.0.0

kineticjs

angularjs