设置要旋转的多边形的偏移量/位置

我正在尝试执行具有不同形状的背景图像。设置要旋转的多边形的偏移量/位置

目标是围绕多边形移动/旋转，使用多边形的形状裁剪背景，以某种方式在多边形上绘制裁剪后的图像，并将裁剪后的多边形保存为新图像。

到目前为止，我可以在画布上拖动和旋转（箭头键）多边形。

首先，我在旋转多边形时遇到了问题：我希望它们在其中心旋转。第二，用多边形裁剪背景。

这里有一个链接到一个jsbin：http://jsbin.com/efoqav/1/edit

任何想法？

谢谢。

来源

2013-05-13 Jums

下面是如何使用您的动力学多边形剪辑的背景图像

enter image description here

首先，使用背景图像作为fillPattern在动力学多边形。要使填充非重复和由该多边形的X/Y位置偏移的模式：

var hexagon = new Kinetic.RegularPolygon({ 
    x: 50, 
    y: 50, 
    sides: 6, 
    radius: 50, 
    fillPatternImage: img, 
    fillPatternRepeat: "no-repeat", 
    fillPatternOffset: [-50,-50], 
    stroke: 'black', 
    strokeWidth: 3, 
    draggable: true 
});

然后，当第i个用户拖动多边形（或你与击键移动），由当前位置重新定位fillPatternOffset的多边形。本质上，多边形内的填充将“跟随”拖动的多边形。

hexagon.on('dragmove', function() { 
    var position=this.getAbsolutePosition(); 
    var x=position.x; 
    var y=position.y 
    this.setFillPatternOffset(x,y); 
    layer.draw(); 
});

要绕其中心（的centerX，centerY）你的多边形，做到这一点三角到每个动力学多边形点，然后重置与yourKineticPolygon.setPoints形状。

// if the rotation angle is degrees, you must first convert it to radians: 
var radianAngle = degreeAngle * Math.PI/180; 

// modify each of your polygon points like this 
var dx = centerX – pointX; 
var dy = centerY – pointY; 
var radius = Math.sqrt( dx*dx + dy*dy); 
var rotatedX = centerX + radius * Math.cos(radianAngle); 
var rotatedY = centerY + radius * Math.cos(radianAngle);

而到了舞台保存为图像，你可以使用stage.toDataURL这样的：

// hide the background since you're just interested in the clip 
background.hide(); 

// this saves the stage (your clipped polygon) to an image url 
stage.toDataURL({ 
    // just like an image object, you need an onload-ish callback 
    callback: function(dataUrl){ 
     // testing -- put the image in an html img 
     var imgElement=document.getElementById("saved"); 
     imgElement.src=dataUrl; 
     // reshow the background 
     background.show(); 
    } 
});

这里的代码和一个小提琴：http://jsfiddle.net/m1erickson/eQYB8/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:20px;} 
    img{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    // this just generates a sample image 
    var canvas=document.createElement("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var count=0; 
    canvas.width=300; 
    canvas.height=300; 
    for(var x=0;x<10;x++){ 
     for(var y=0;y<10;y++){ 
      ctx.beginPath(); 
      ctx.arc(x*30+15,y*30+15,15,0,Math.PI*2,false); 
      ctx.fillText(count++,x*30+11,y*30+18); 
      ctx.stroke(); 
     } 
    } 
    var img=new Image(); 
    img.onload=function(){ 
     draw(); 
    } 
    img.src=canvas.toDataURL(); 


    function draw(){ 

      var stage = new Kinetic.Stage({ 
       container: 'container', 
       width: 300, 
       height: 300 
      }); 
      var layer = new Kinetic.Layer(); 
      stage.add(layer); 

      var background = new Kinetic.Image({ 
       x: 0, 
       y: 0, 
       image: img, 
       width: 300, 
       height: 300, 
       opacity:.25 
      }); 
      layer.add(background); 

      var hexagon = new Kinetic.RegularPolygon({ 
       x: 50, 
       y: 50, 
       sides: 6, 
       radius: 50, 
       fillPatternImage: img, 
       fillPatternRepeat: "no-repeat", 
       fillPatternOffset: [-50,-50], 
       stroke: 'black', 
       strokeWidth: 3, 
       draggable: true 
      }); 
      layer.add(hexagon); 
      layer.draw(); 


      hexagon.on('dragmove', function() { 
       var position=this.getAbsolutePosition(); 
       var x=position.x; 
       var y=position.y 
       this.setFillPatternOffset(x,y); 
       layer.draw(); 
      }); 

      $("#save").click(function(){ 
       background.hide(); 
       stage.toDataURL({ 
        callback: function(dataUrl){ 
         var imgElement=document.getElementById("saved"); 
         imgElement.src=dataUrl; 
         background.show(); 
        } 
       }); 
      }); 

    } 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="save">Save</button><br><br> 
    <p>Drag the Polygon to your desired clip</p><br> 
    <div id="container"></div><br> 
    <p>Saved results without background</p> 
    <img id="saved" width=300 height=300/> 
</body> 
</html>

来源

2013-05-13 18:53:19 markE

设置要旋转的多边形的偏移量/位置

回答

相关问题