转换线图像中运动JS V5.0.0 [英] Convert line to image in kinetic js v5.0.0

问题描述

我有一个线如下图所示结果
 

I have a line as shown below

行属性是
当我使用以下code将其转换为图像，

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

我已经尝试了很多设置线路在0,0位置的任何建议？谢谢

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

推荐答案

我能够转换线图像：

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

这篇关于转换线图像中运动JS V5.0.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！