用Java動畫制作的Word Web

Question

我正在嘗試設計一個類似於此處找到的動畫字網。 目標是使中心單詞泡泡固定在一個位置，並使周圍的其他單詞泡泡移動。

我希望以chartjs中的氣泡圖為基礎，並刪除圖例，網格線，軸等以獲取氣泡。 但是，除了文檔中包含的工具提示外，我無法找到一種向其中一個氣泡添加文本的方法。 有沒有一種方法可以在氣泡內添加文本，使其始終可見？ 還是有人可以指出我要建立一個更好的圖書館的方向嗎？

Answer 1

我瘋了，但是我用Canvas編碼。 很無聊哈哈。 通過將其粘貼到新的html文件中進行測試：D您可以使用新文本來處理參數，顏色，形狀和新氣泡。 玩得開心！

    <!DOCTYPE html>
    <html>

    <head>
      <title></title>

    </head>

<body>
    <canvas id="canvas"></canvas>

  <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = 400;
      canvas.height = 400;  
      var r = 0;


      var bubbles = [];

      bubbles.push(new Bubble(canvas.width/2, canvas.height/2, "Apple", "rgb(0,0,120)", 30, 20));
        bubbles.push(new Bubble(canvas.width/2 + 100, canvas.height/2, "Store", "rgb(0,0,200)", 30, 20));
         bubbles.push(new Bubble(canvas.width/2 - 100, canvas.height/2, "Ipad", "rgb(0,0,200)", 30, 20));
          bubbles.push(new Bubble(canvas.width/2, canvas.height/2 + 100, "iMac", "rgb(120,0,0)", 30, 20));



      setInterval(function(){update();}, 20);

      function update()
      {
          ctx.clearRect(0,0,canvas.width, canvas.height);
          for (var i=bubbles.length-1; i>=0; i--)
          {
              bubbles[i].update();

          }
      }

    function Vector(x,y)
    {
        this.x = x;
        this.y = y;

        this.startX = x;
        this.startY = y;

        this.add = function (v)
        {
            this.x += v.x;
            this.y += v.y;
        }

        this.mult = function(p)
        {
            this.x *= p;
            this.y *= p;
        }

         this.rotate = function(ang)
         {
        this.x = (this.startX - bubbles[0].position.x) * Math.cos(ang) 
                        - (this.startY - bubbles[0].position.y) * Math.sin(ang) 
                        + bubbles[0].position.x;

        this.y = (this.startX - bubbles[0].position.x) * Math.sin(ang) 
                        + (this.startY - bubbles[0].position.y) * Math.cos(ang) 
                        + bubbles[0].position.y;
         }

    }


    function Bubble(x,y,text, color, width, height)
    {
        this.position = new Vector(x,y);
        this.velocity = new Vector(0,0);
        this.acceleration = new Vector(0,0);

        this.text = text;
        this.color = color;

        this.width = width;
        this.height = height;

        this.draw = function()
        {   ctx.beginPath();

                if(this.text != "Apple")
                {
                    ctx.lineTo(bubbles[0].position.x, bubbles[0].position.y);
                }
             ctx.font = "bold 13pt Arial";
            ctx.fillStyle = this.color;
            ctx.strokeStyle = this.color;
              ctx.arc(this.position.x,this.position.y, this.width, 0, 2 * Math.PI, false);
               ctx.fill();
                ctx.fillStyle = "black";


              ctx.stroke();
                ctx.fillText(this.text, this.position.x - this.width / 2 - 6, this.position.y + this.height / 4);
        }

        this.update = function()
        {
              if(this.text != "Apple")
             {
                 r--;
                 if (r < -1440)
                 r = 1;

                this.position.rotate( Math.PI / 720 * r);



             }
              this.draw();
        }
    }   







  </script>
</body>

</html>

用Java動畫制作的Word Web

問題描述

1 個解決方案

解決方案1
0 2017-04-01 20:56:18

用Java動畫制作的Word Web

問題描述

1 個解決方案

解決方案1 0 2017-04-01 20:56:18

解決方案1
0 2017-04-01 20:56:18