javascript - 如何在 HTML5 Canvas 中绘制弯曲的 Spring ？

Question

我想在 HTML5 Canvas 中绘制一个 Spring ，并显示该 Spring 是否处于静止长度。我的 Spring 连接到某个 X-Y 坐标的矩形形状，并定义如下:

function Spring(restLenght, width, numRounds){
  this.x1 = 0;
  this.y1 = 0;
  this.x2 = 0;
  this.y2 = 0;
  this.restLenght = restLenght;
  this.width = width;
  this.numRounds = numRounds;
  this.color = "green";
  this.lineWidth = 6;
}

参数解释如下图:

当 Spring 处于静止长度时，这些线应彼此平行，否则这意味着 Spring 被拉伸(stretch)或压缩。那么 Spring 处于什么状态就立刻清楚了。

我现在被 bezierCurveTo() 方法困住了:

这是我的 fiddle :https://jsfiddle.net/df3mm8kz/1/

var cv = document.getElementById('cv'),
  ctx = cv.getContext('2d'),
  mouse = capture(cv),
  box = new Box(120, 80, 0, 16),
  spring = new Spring(160, 20, 2, 0.03, 0.9),
  vx = 0,
  vy = 0;
function Spring(restLenght, width, numRounds, k, f){
	this.x1 = 0;
  this.y1 = 0;
  this.x2 = 0;
  this.y2 = 0;
  this.restLenght = restLenght;
  this.width = width;
  this.numRounds = numRounds;
  this.k = k;
  this.f = f;
  this.color = "green";
  this.lineWidth = 6;
}

Spring.prototype.draw = function(ctx) {
	var sPX, sPY, cP1X, cP1Y, cP2X, cP2Y, ePX, ePY;
  ctx.save();
  ctx.translate(this.x, this.y);
  ctx.rotate(this.rotation);
  ctx.lineWidth = this.lineWidth;
  ctx.strokeStyle = this.color;
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.moveTo(this.x1, this.y1);
  // length of one spring's round
  var l = this.restLenght/(this.numRounds + 2);
  // Initial segment, from spring anchor point to the first round
  sPX = this.x1+l; sPY = this.y2;
  ctx.lineTo(sPX, sPY);
  // half width of spring's rounds
  var hw = 0.5*this.width;
  // half length of one spring's round
  var hl = 0.5*l;
  for(var i=0, n=this.numRounds; i<n; i++) {
  	cP1X = sPX + hl*i; cP1Y = sPY + hw;
    cP2X = sPX + l*i; cp2Y = sPY + hw;
    ePX = sPX + l*i; ePY = sPY;
  	ctx.bezierCurveTo(cP1X,cP1Y,cP2X,cp2Y,ePX,ePY);
  	cP1X = sPX + hl*i; cP1Y = sPY - hw;
    cP2X = sPX + l*i; cp2Y = sPY - hw;
    ePX = sPX + l*i; ePY = sPY;
  	ctx.bezierCurveTo(cP1X,cP1Y,cP2X,cp2Y,ePX,ePY);
  }
  // Final segment, from last springs round to the center of mass
  ctx.lineTo(this.x2, this.y2);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
};

function Box(w, h, mx, my) {
  this.x = 0;
  this.y = 0;
  this.w = w;
  this.h = h;
  this.mx = mx;
  this.my = my;
  this.vx = 0;
  this.vy = 0;
  this.rotation = 0;
  this.color = "red";
  this.lineWidth = 1;
}

Box.prototype.draw = function(ctx) {
  ctx.save();
  ctx.translate(this.x, this.y);
  ctx.rotate(this.rotation);
  ctx.lineWidth = this.lineWidth;
  ctx.strokeStyle = "black";
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.rect(-0.5*this.w, -0.5*this.h, this.w, this.h);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();
  ctx.strokeStyle = "yellow";
  ctx.fillStyle = "yellow";
  ctx.arc(this.mx, 0.5*this.h-this.my, 6, 0, 2 * Math.PI, false);
  ctx.stroke();
  ctx.closePath();
  ctx.fill();
  ctx.restore();
};

window.requestAnimFrame = (
  function(callback) {
    return window.setTimeout(callback, 1000/30);
  });

(function drawFrame() {
  window.requestAnimFrame(drawFrame, cv);
  ctx.clearRect(0, 0, cv.width, cv.height);

  var dx = box.x - mouse.x,
    dy = box.y - mouse.y,
    angle = Math.atan2(dy, dx),
    boxAngle = angle + 0.5*Math.PI,
    targetX = mouse.x + Math.cos(angle) * spring.restLenght,
    targetY = mouse.y + Math.sin(angle) * spring.restLenght;
   
  vx += (targetX - box.x) * spring.k;
  vy += (targetY - box.y) * spring.k;
  vx *= spring.f;
  vy *= spring.f;
  box.rotation = boxAngle;
  box.x += vx;
  box.y += vy;
  box.draw(ctx);
  spring.x1 = mouse.x;
  spring.y1 = mouse.y;
  spring.x2 = box.x;
  spring.y2 = box.y;
  spring.draw(ctx);
}());


function capture(element) {
  var mouse = {
      x: 0,
      y: 0,
      event: null
    },
    body_scrollLeft = document.body.scrollLeft,
    element_scrollLeft = document.documentElement.scrollLeft,
    body_scrollTop = document.body.scrollTop,
    element_scrollTop = document.documentElement.scrollTop,
    offsetLeft = element.offsetLeft,
    offsetTop = element.offsetTop;

  element.addEventListener('mousemove', function(event) {
    var x, y;
    if (event.pageX || event.pageY) {
      x = event.pageX;
      y = event.pageY;
    } else {
      x = event.clientX + body_scrollLeft + element_scrollLeft;
      y = event.clientY + body_scrollTop + element_scrollTop;
    }
    x -= offsetLeft;
    y -= offsetTop;
    mouse.x = x;
    mouse.y = y;
    mouse.event = event;
  }, false);

  return mouse;
}

<canvas id="cv" width="600" height="400"></canvas>

Answer 1

绘制 Spring

我不使用实际上不适合 Spring 曲线(但接近)的贝塞尔曲线，而是使用简单的路径并使用三 Angular 函数来绘制每个绕组。该函数有起始x1，y1和结束x2，y2，绕组(应该是整数)， Spring 宽度，偏移(末端的位)，深色和浅色，以及笔画宽度(电线的宽度) )。

该演示绘制了一个额外的亮点，使 Spring 更有深度。它可以很容易地被删除。

代码来自this answer具有相同功能的更简单版本

    function drawSpring(x1, y1, x2, y2, windings, width, offset, col1, col2, lineWidth){
        var x = x2 - x1;
        var y = y2 - y1;
        var dist = Math.sqrt(x * x + y * y);
        
        var nx = x / dist;
        var ny = y / dist;
        ctx.strokeStyle = col1
        ctx.lineWidth = lineWidth;
        ctx.lineJoin = "round";
        ctx.lineCap = "round";
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        x1 += nx * offset;
        y1 += ny * offset;
        x2 -= nx * offset;
        y2 -= ny * offset;
        var x = x2 - x1;
        var y = y2 - y1;
        var step = 1 / (windings);
        for(var i = 0; i <= 1-step; i += step){  // for each winding
            for(var j = 0; j < 1; j += 0.05){
                var xx = x1 + x * (i + j * step);
                var yy = y1 + y * (i + j * step);
                xx -= Math.sin(j * Math.PI * 2) * ny * width;
                yy += Math.sin(j * Math.PI * 2) * nx * width;
                ctx.lineTo(xx,yy);
            }
        }
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 + nx * offset, y2 + ny * offset)
        ctx.stroke();
        ctx.strokeStyle = col2
        ctx.lineWidth = lineWidth - 4;
        var step = 1 / (windings);
        ctx.beginPath();
        ctx.moveTo(x1 - nx * offset, y1 - ny * offset);
        ctx.lineTo(x1, y1);
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 + nx * offset, y2 + ny * offset)
        for(var i = 0; i <= 1-step; i += step){  // for each winding
            for(var j = 0.25; j <= 0.76; j += 0.05){
                var xx = x1 + x * (i + j * step);
                var yy = y1 + y * (i + j * step);
                xx -= Math.sin(j * Math.PI * 2) * ny * width;
                yy += Math.sin(j * Math.PI * 2) * nx * width;
                if(j === 0.25){
                    ctx.moveTo(xx,yy);
                
                }else{
                    ctx.lineTo(xx,yy);
                }
            }
        }
        ctx.stroke();
    }

    function display() { 
        ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
        ctx.globalAlpha = 1; // reset alpha
        ctx.clearRect(0, 0, w, h);
        ctx.lineWidth = 8;
        drawSpring(canvas.width / 2,10, mouse.x,mouse.y,8,100,40,"green","#0C0",15);
    }



    // Boiler plate code from here down and not part of the answer
    var w, h, cw, ch, canvas, ctx, mouse, globalTime = 0, firstRun = true;
    ;(function(){
        const RESIZE_DEBOUNCE_TIME = 100;
        var  createCanvas, resizeCanvas, setGlobals, resizeCount = 0;
        createCanvas = function () {
            var c,
            cs;
            cs = (c = document.createElement("canvas")).style;
            cs.position = "absolute";
            cs.top = cs.left = "0px";
            cs.zIndex = 1000;
            document.body.appendChild(c);
            return c;
        }
        resizeCanvas = function () {
            if (canvas === undefined) {
                canvas = createCanvas();
            }
            canvas.width = innerWidth;
            canvas.height = innerHeight;
            ctx = canvas.getContext("2d");
            if (typeof setGlobals === "function") {
                setGlobals();
            }
            if (typeof onResize === "function") {
                if(firstRun){
                    onResize();
                    firstRun = false;
                }else{
                    resizeCount += 1;
                    setTimeout(debounceResize, RESIZE_DEBOUNCE_TIME);
                }
            }
        }
        function debounceResize() {
            resizeCount -= 1;
            if (resizeCount <= 0) {
                onResize();
            }
        }
        setGlobals = function () {
            cw = (w = canvas.width) / 2;
            ch = (h = canvas.height) / 2;
        }
        mouse = (function () {
            function preventDefault(e) {
                e.preventDefault();
            }
            var mouse = {
                x : 0,
                y : 0,
                w : 0,
                alt : false,
                shift : false,
                ctrl : false,
                buttonRaw : 0,
                over : false,
                bm : [1, 2, 4, 6, 5, 3],
                active : false,
                bounds : null,
                crashRecover : null,
                mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",")
            };
            var m = mouse;
            function mouseMove(e) {
                var t = e.type;
                m.bounds = m.element.getBoundingClientRect();
                m.x = e.pageX - m.bounds.left;
                m.y = e.pageY - m.bounds.top;
                m.alt = e.altKey;
                m.shift = e.shiftKey;
                m.ctrl = e.ctrlKey;
                if (t === "mousedown") {
                    m.buttonRaw |= m.bm[e.which - 1];
                } else if (t === "mouseup") {
                    m.buttonRaw &= m.bm[e.which + 2];
                } else if (t === "mouseout") {
                    m.buttonRaw = 0;
                    m.over = false;
                } else if (t === "mouseover") {
                    m.over = true;
                } else if (t === "mousewheel") {
                    m.w = e.wheelDelta;
                } else if (t === "DOMMouseScroll") {
                    m.w = -e.detail;
                }
                if (m.callbacks) {
                    m.callbacks.forEach(c => c(e));
                }
                if ((m.buttonRaw & 2) && m.crashRecover !== null) {
                    if (typeof m.crashRecover === "function") {
                        setTimeout(m.crashRecover, 0);
                    }
                }
                e.preventDefault();
            }
            m.addCallback = function (callback) {
                if (typeof callback === "function") {
                    if (m.callbacks === undefined) {
                        m.callbacks = [callback];
                    } else {
                        m.callbacks.push(callback);
                    }
                }
            }
            m.start = function (element) {
                if (m.element !== undefined) {
                    m.removeMouse();
                }
                m.element = element === undefined ? document : element;
                m.mouseEvents.forEach(n => {
                    m.element.addEventListener(n, mouseMove);
                });
                m.element.addEventListener("contextmenu", preventDefault, false);
                m.active = true;
            }
            m.remove = function () {
                if (m.element !== undefined) {
                    m.mouseEvents.forEach(n => {
                        m.element.removeEventListener(n, mouseMove);
                    });
                    m.element.removeEventListener("contextmenu", preventDefault);
                    m.element = m.callbacks = undefined;
                    m.active = false;
                }
            }
            return mouse;
        })();

        // Clean up. Used where the IDE is on the same page.
        var done = function () {
            window.removeEventListener("resize", resizeCanvas)
            mouse.remove();
            document.body.removeChild(canvas);
            canvas = ctx = mouse = undefined;
        }


        function update(timer) { // Main update loop
            if(ctx === undefined){
                return;
            }
            globalTime = timer;
            display(); // call demo code
            if (!(mouse.buttonRaw & 2)) {
                requestAnimationFrame(update);
            } else {
                done();
            }
        }
        setTimeout(function(){
            resizeCanvas();
            mouse.start(canvas, true);
            mouse.crashRecover = done;
            window.addEventListener("resize", resizeCanvas);
            requestAnimationFrame(update);
        },0);
    })();
    /** SimpleFullCanvasMouse.js end **/