在javascript中绘制框

Question

我正在尝试为一个盒子的绘图制作动画，然后在它完成后填充。我正在学习 JS 的课程，所以代码必须是 JS。问题是框​​的右侧无法正确设置动画。如果我为它输入一组坐标，它会从底部到顶部而不是从顶线开始的角落开始动画。当我反转坐标时，它确实从正确的角开始动画，但不是画线，而是从实线开始并从它移开，就像一条消失的线。此外，左右侧线似乎都超出了分配的区域。例如，我的区域是 600 x 400，线条从页面底部移开。如果我将尺寸更改为 600 x 600，线条仍然会离开页面。整个项目的重点是我们使用 SVG 库对房屋进行了编码，并且我想创建一个动画，使其看起来好像房屋在填充颜色之前正在绘制。这更多的是我自己的知识，因为它不再是一项任务。我的 jsfiddle 有 2 个链接，第一个是绘制框的问题代码。第二个是我想要动画的房子的样子。

drawing box

    "use strict"
    var draw = SVG('drawing').size(600, 400);

    function makeBox()

    {
    var line1 = draw.line(25,175,26,175);
    line1.stroke({width:1});
    line1.animate(4000).size(550);

    var line2 = draw.line(575,175,575,176);
    line2.stroke({width:1});
    line2.animate({duration:4000,delay:4000}).size(200).move(575,375);


    var line3 = draw.line(575,375,574,375);
    line3.stroke({width:1});
    line3.animate({duration:4000,delay:8000}).move(25,375).size(550);

    var line4 = draw.line(25,375,25,374);
    line4.stroke({width:1});
    line4.animate({duration:4000,delay:12000}).size(200).move(25,175);
    }
    makeBox();


    function makeBaseb1(bx,by,c,s)

    {
    var Baseb1 = draw.rect(550,200).opacity(0).fill(c).stroke();
    Baseb1.animate({delay:'16s'}).opacity(1).fill({color:c});
    Baseb1.stroke({width:s,color:'black'});
    Baseb1.move(bx,by);

    }
    makeBaseb1(25,175,'#FF9900',1);

house

Answer 1

makeBox 函数存在 2 个问题：

• .size 方法采用 2 个参数而不是 1 个参数（x 和 y 维度）。
• 对于与坐标系相反方向的线图， 起始坐标和线长都需要动画。

更新功能：

function makeBox() {
    var line1 = draw.line(25,175,26,175);
    line1.stroke({width:1});
    line1.animate(4000).size(550,0);

    var line2 = draw.line(575,175,575,176);
    line2.stroke({width:1});
    line2.animate({duration:4000,delay:4000}).size(0,200); 

    var line3 = draw.line(574,375,575,375);
    line3.stroke({width:1});
    line3
        .animate({duration:4000,delay:8000})
        .during(
            function (pos, morph, eased, situation) {
                line3.x(morph(574,25));
                line3.size(morph(1,550),morph(0,0));
            }
         )
    ;

    var line4 = draw.line(25,374,25,375);
    line4.stroke({width:1});
    line4
        .animate({duration:4000,delay:12000})
        .during(
            function (pos, morph, eased, situation) {
                line4.y(morph(374,175));
                line4.size(morph(0,0),morph(1,200));
            }
         )
    ;
}

.during 方法的使用记录在 here。