오프셋/회전 할 폴리곤 위치 설정

다른 모양의 배경 이미지 자르기를 수행하려고합니다.오프셋/회전 할 폴리곤 위치 설정

다각형 주위를 이동/회전하고, 다각형 모양으로 배경을 자르고, 자른 이미지를 다각형 위에 그려주고 자른 다각형을 새 이미지로 저장하는 것이 목적입니다.

지금까지 캔버스 위로 다각형을 드래그하여 회전 (화살표 키) 할 수 있습니다.

먼저, 다각형을 회전하는 데 문제가 있습니다. 중심에서 회전하려고합니다. 두 번째, 다각형 모양으로 배경을 자릅니다. http://jsbin.com/efoqav/1/edit

어떤 아이디어 :

여기 jsbin에 대한 링크가있어?

감사합니다.

출처

2013-05-13 Jums

여기, 배경 이미지를

enter image description here

먼저 클립 당신의 운동 다각형의 fillPattern로 배경 이미지를 사용하도록 운동 다각형을 사용하는 방법은 다음과 같습니다. 현재 위치하여 fillPatternOffset 위치를, 유저가 다각형을 드래그 할 때 번째이어서

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

(또는 키 스트로크로 이동) 충전 비 반복하고 다각형의 x/y 위치가 패턴 오프셋 다각형의 본질적으로 폴리곤 내부의 채우기는 드래그하는 폴리곤을 "따라갈 것"입니다.

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를 사용할 수 있습니다 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>

는

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

다음 코드와 바이올린의

출처

2013-05-13 18:53:19 markE

오프셋/회전 할 폴리곤 위치 설정

답변

관련 문제