0

HTML5を使用しています。誰かがキャンバスをウェブページに揃えるのを手伝ってくれませんか。最初は、矢印を配置するために div タグを使用しました。次に、矢印の後に楕円を取得する必要があります。キャンバスタグを使用しました。しかし、うまくいきませんでした。誰でも私を案内できますか？複数のオブジェクトを配置する必要があるため、canvas を使用しました。ありがとうございました。
divタグで、 

div id="container" align='left'

キャンバスタグで、 

 canvas id="myCanvas" left="210" top="210" width="1000" height="200"
4

2 に答える 2

1

位置合わせについて話している"the ellipse after the arrow"場合、"I need to place multiple objects and so I used canvas."つまり矢印と楕円をキャンバス上に配置することを意味する場合は、Javascript とその API を使用してキャンバスを操作する必要があります。

ここから学習を開始できます。

于 2013-06-05T10:33:49.140 に答える
1

矢印線で結ばれた楕円の描き方

もちろん、楕円にドラッグ/描画するものは、プロジェクトの要件によって決まります。

ここに画像の説明を入力

この関数は、指定された上、左、および幅の楕円を描画します。

いくつかのメモ:

  • これは実際には楕円の近似値であり、数学的な楕円ではありません。
  • 高さは関数によって決まります。
  • この関数は、楕円の終了 X と中心 Y を返します (コネクタを接続するときに役立ちます)。

.

    function drawEllipse(x,cy,width) {
      // x=left, cy=vertical center of ellipse
      // note: just an approximation of an ellipse
      var height=width*0.40;
      ctx.beginPath();
      ctx.moveTo(x, cy);
      ctx.bezierCurveTo(
        x+width/2*.05, cy-height,
        x+width-width/2*.05, cy-height,
        x+width, cy);
      ctx.bezierCurveTo(
        x+width-width/2*.05, cy+height,
        x+width/2*.05, cy+height,
        x, cy);
      ctx.closePath();  
      ctx.stroke();
      return({x:x+width,y:cy});
    }

この関数は、オプションの開始矢印と終了矢印を使用して接続線を描画します

    function drawConnector(startX,startY,endX,endY,hasStartArrow,hasEndArrow){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
        if(hasStartArrow){
            var startRadians=Math.atan((endY-startY)/(endX-startX));
            startRadians+=((endX>startX)?-90:90)*Math.PI/180;
            drawArrow(startX,startY,startRadians);
        }
        if(hasEndArrow){
                var endRadians=Math.atan((endY-startY)/(endX-startX));
                endRadians+=((endX>startX)?90:-90)*Math.PI/180;
                drawArrow(endX,endY,endRadians);
        }
    }

    function drawArrow(x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(6,20);
        ctx.lineTo(-6,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

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

<!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:15px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // holds the right/vertical-center point of the last ellipse or connector 
    var point;

    point=drawEllipse(20,50,100);
    point=drawConnector(point.x,point.y,250,100,true,true);
    point=drawEllipse(point.x,point.y,100);


    // x=left, cy=vertical center of ellipse
    function drawEllipse(x,cy,width) {
      // note: just an approximation of an ellipse
      var height=width*0.40;
      ctx.beginPath();
      ctx.moveTo(x, cy);
      ctx.bezierCurveTo(
        x+width/2*.05, cy-height,
        x+width-width/2*.05, cy-height,
        x+width, cy);
      ctx.bezierCurveTo(
        x+width-width/2*.05, cy+height,
        x+width/2*.05, cy+height,
        x, cy);
      ctx.closePath();  
      ctx.stroke();
      return({x:x+width,y:cy});
    }

    function drawConnector(startX,startY,endX,endY,hasStartArrow,hasEndArrow){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
        if(hasStartArrow){
            var startRadians=Math.atan((endY-startY)/(endX-startX));
            startRadians+=((endX>startX)?-90:90)*Math.PI/180;
            drawArrow(startX,startY,startRadians);
        }
        if(hasEndArrow){
                var endRadians=Math.atan((endY-startY)/(endX-startX));
                endRadians+=((endX>startX)?90:-90)*Math.PI/180;
                drawArrow(endX,endY,endRadians);
        }
        return({x:endX,y:endY});
    }

    function drawArrow(x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(6,20);
        ctx.lineTo(-6,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }


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

</head>

<body>
    <canvas id="canvas" width=400 height=200></canvas>
</body>
</html>
于 2013-06-05T15:23:13.997 に答える