3

私はいくつかの単語を持っています.すべての単語は「オブジェクト」の王です。この単語はキャンバス上を移動できます。この例のように、すべての交点の配列を取得する必要がありますが、テキストを SVG に変換する必要はありません。paperjs.org/examples/path-intersections ありがとうございます。

4

1 に答える 1

6

2 つの単語の imageData を比較することで、2 つの単語間のすべての交点を検出できます。

単語が交差する場所はどこでも、そのピクセルで両方の単語のアルファ値がゼロより大きくなります。

ここに画像の説明を入力

ここにコードとフィドルがあります：http://jsfiddle.net/m1erickson/ecAvt/

<!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>

<style>
    body{ background-color: ivory; padding:20px; }
    #wrapper{
        position:relative;
        width:400px;
        height:400px;
    }
    #canvasTop,#canvasBottom,#canvasDots{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvasTop{
        border:1px solid red;
    }
    #canvasDots{
        border:1px solid blue;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvasTop");
    var ctx=canvas.getContext("2d");
    ctx.font="192px verdana";
    ctx.strokeText("No",40,220);

    var canvas2=document.getElementById("canvasBottom");
    var ctx2=canvas2.getContext("2d");
    ctx2.font="192px verdana";
    ctx2.strokeStyle="lightgray";
    ctx2.strokeText("Yes",40,300);

    var canvas3=document.getElementById("canvasDots");
    var ctx3=canvas3.getContext("2d");
    ctx3.fillStyle="blue";

    var canvasOffset=$("#canvasTop").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;



    var imageData2=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
    var data2=imageData2.data;

    var dotsVisible=false;

    function showIntersections(){

        var imageData=ctx.getImageData(0,0,canvas.width,canvas.height);
        var data=imageData.data;

        ctx3.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<data.length;i+=4){
            if(data[i+3]>120 && data2[i+3]>120){
                var y=parseInt(i/canvas.width/4);
                var x=i/4-y*canvas.width;
                ctx3.beginPath();
                ctx3.arc(x,y,3,0,Math.PI*2);
                ctx3.closePath();
                ctx3.fill();
            }
        }
        dotsVisible=true;
    }

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      showIntersections();

    }

    function handleMouseUp(e){
      isDown=false;
    }

    function handleMouseOut(e){
      isDown=false;
    }

    function handleMouseMove(e){
      if(dotsVisible){ctx3.clearRect(0,0,canvas.width,canvas.height);}
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.strokeText("No",mouseX,mouseY+100);

    }

    $("#canvasDots").mousedown(function(e){handleMouseDown(e);});
    $("#canvasDots").mousemove(function(e){handleMouseMove(e);});
    $("#canvasDots").mouseup(function(e){handleMouseUp(e);});
    $("#canvasDots").mouseout(function(e){handleMouseOut(e);});

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

</head>

<body>
    <h3>Move "NO" with mouse</h3>
    <h3>Click to find intersections</h3>
    <div id="wrapper">
        <canvas id="canvasBottom" width=400 height=400></canvas>
        <canvas id="canvasTop" width=400 height=400></canvas>
        <canvas id="canvasDots" width=400 height=400></canvas>
    </div>
</body>
</html>
于 2013-11-13T16:43:15.920 に答える