Question

好的，我在这里使用的是Sketch.js，但这适用于使用JS在画布上制作任何形状的形状。

我需要知道是否有图书馆/最佳方式将一堆圆圈映射到特定形状 - 我正在尝试做这样的世界地图：

我已经看到类似的事情用JS完成了https://www.codecademy.com/courses/animate-your-name/0/1并希望达到同样的效果 - 气泡形成一个形状，然后当你鼠标悬停时，它们会动画出来。

如果我找不到这个，我会手动将我的形状映射到地图中，但这很乏味，可能不是最好的方法。到目前为止我做的形状：

function Particle( x, y, radius, color) {
        this.init( x, y, radius, color);
    }

    Particle.prototype = {

        init: function( x, y, radius, color) {

            this.alive = true;

            this.radius = radius;
              this.baseRadius = radius;
              this.threshold = 30; //from circle

            this.wander = 0.15;
            this.drag = 0.92;
            this.color = color;

            this.x = x;
            this.y = y;

            this.vx = 0.0;
            this.vy = 0.0;
        },

        move: function() {

            // this.x += this.vx;
            // this.y += this.vy;
            //
            // this.vx *= this.drag;
            // this.vy *= this.drag;
            //
            // this.theta += random( -0.5, 0.5 ) * this.wander;
            // this.vx += sin( this.theta ) * 0.1;
            // this.vy += cos( this.theta ) * 0.1;
            this.radius *= 0.96;
            this.alive = this.radius > 0.5;
        },

        draw: function( ctx ) {

            ctx.beginPath();
            ctx.arc( this.x, this.y, this.radius, 0, TWO_PI );
            ctx.fillStyle = this.color;
            ctx.fill();
        }

    };

    // ----------------------------------------
    // Example
    // ----------------------------------------

    var PARTICLES = [];
    var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];

    var particles = [];
    var pool = [];

    var demo = Sketch.create({
        container: document.getElementById( 'container' ),
        retina: 'auto'
    });

    demo.setup = function() {

        PARTICLES = [new Particle(demo.width * 0.1, demo.height * 0.1, 100, '#ff0000'), new Particle(20, 50, 1, '#E0E4CC'), new Particle(0, 10, 6, '#E0E4CC')];

        PARTICLES.forEach(function(c) {
          c.init(c.x + (c.radius/2), c.y + (c.radius/2), c.radius, c.color);
          particles.push(c);
          c.draw(demo);
        });
    };

只需在我手动设置x，y的位置放置3个点。

我该怎么做？

JS：定位圆形的某种形状？

0 个答案: