Convert line to image in kinetic js v5.0.0

问题:

I have a line as shown below

Line attributes are When I convert it to image using following code,

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

The image that I get is

I have tried a lot to set the line at 0,0 position any suggestion? Thanks

回答1:

I am able to convert line to image:

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