方形模拟时钟与Raphaeljs

Question

我正在尝试用Raphael JS创建一种方形时钟，而不是12位数我的有8位数。我在这个页面上找到了圆形时钟的一个很好的例子; Emanuele Feronato

我想根据这个创建我的时钟，但是在将数字短划线对齐到他们的位置时我遇到了麻烦。对于第一轮，基本示例使用一些余弦和罪来计算它们的位置。但是在广场上，我希望所有的破折号都能对齐，以便它们能够碰到正方形的边界。

瞄准这样的事情;

我想知道计算这些破折号方块的最简单和最好的方法是什么？还有一个干净的数学解决方案，用于方形的圆形时钟吗？

这是我当前模板的小提琴; fiddle

这也是我目前的模板;

function draw_square_clock(svgId) {
  canvas = Raphael(svgId, 200, 200);
  var clock = canvas.rect(3, 3, 194, 194);
  clock.attr({
    "fill": "#ffffff",
    "stroke": "#000000",
    "stroke-width": "4"
  });
  var hour_sign;
  var text_sign;
  for (i = 0.0; i < 12; i = i + 1.5) {
    //How am I going to calculate these four values to align hour signs to the edges of square
    var start_x = 100 + Math.round(80 * Math.cos(30 * i * Math.PI / 180));
    var start_y = 100 + Math.round(80 * Math.sin(30 * i * Math.PI / 180));
    var end_x = 100 + Math.round(90 * Math.cos(30 * i * Math.PI / 180));
    var end_y = 100 + Math.round(90 * Math.sin(30 * i * Math.PI / 180));

    hour_sign = canvas.path("M" + start_x + " " + start_y + "L" + end_x + " " + end_y);
    hour_sign.attr({
      "stroke-width": "6"
    });
    hour_sign.transform("t0,0 s2");

  }

  hour_hand = canvas.path("M100 100L100 50");
  hour_hand.attr({
    stroke: "#000000",
    "stroke-width": 6
  });
  var pin = canvas.circle(100, 100, 8);
  pin.attr("fill", "#000000");
}



$(document).ready(function() {
  draw_square_clock('clock_id');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>

<div id="clock_id"></div>

Answer 1

<强>在数学上：

计算角标记的长度：

// length of tick a 0 degrees
var tickLengthAt0=30;

// calculate length of corner tick
var cornerTickLength=Math.sqrt(2*(tickLengthAt0*tickLengthAt0));

使用三角法计算每个刻度线段：

var PI=Math.PI;
var cx=150;
var cy=150;
var width=200;
var height=200;

function calcTickPoints(x0,y0,length,angle){
    x1=x0+length*Math.cos(angle);
    y1=y0+length*Math.sin(angle);
    return({ x0:x0, y0:y0, x1:x1, y1:y1 });
}

// Use calcTickPoints to calc the points of each tick

// top-right
var TR=calcTickPoints(cx+width/2,cy-height/2,cornerTickLength,PI*3/4);
// bottom-right
var BR=calcTickPoints(cx+width/2,cy+height/2,cornerTickLength,PI*5/4);
// bottom-left
var BL=calcTickPoints(cx-width/2,cy+height/2,cornerTickLength,PI*7/4);
// top-left
var TL=calcTickPoints(cx-width/2,cy-height/2,cornerTickLength,PI*9/4);
// right
var R=calcTickPoints(cx+width/2,cy,tickLengthAt0,PI);
// bottom
var B=calcTickPoints(cx,cy+height/2,tickLengthAt0,PI*3/2);
// left
var L=calcTickPoints(cx-width/2,cy,tickLengthAt0,PI*2);
// top
var T=calcTickPoints(cx,cy-height/2,tickLengthAt0,PI/2);

示例代码（在Canvas上绘制，但如果需要，您可以使用SVG）：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var PI=Math.PI;
var PI2=PI*2;
var cx=150;
var cy=150;
var width=200;
var height=200;
var tickLengthAt0=30;
var cornerTickLength=Math.sqrt(2*(tickLengthAt0*tickLengthAt0));

drawFace();

function drawFace(){       
  // rect
  ctx.strokeRect(cx-width/2,cy-height/2,width,height);
  // top-right
  drawTick(cx+width/2,cy-height/2,cornerTickLength,PI*3/4);
  // bottom-right
  drawTick(cx+width/2,cy+height/2,cornerTickLength,PI*5/4);
  // bottom-left
  drawTick(cx-width/2,cy+height/2,cornerTickLength,PI*7/4);
  // top-left
  drawTick(cx-width/2,cy-height/2,cornerTickLength,PI*9/4);
  // right
  drawTick(cx+width/2,cy,tickLengthAt0,PI);
  // bottom
  drawTick(cx,cy+height/2,tickLengthAt0,PI*3/2);
  // left
  drawTick(cx-width/2,cy,tickLengthAt0,PI*2);
  // top
  drawTick(cx,cy-height/2,tickLengthAt0,PI/2);
}

function drawTick(x0,y0,length,angle){
  x1=x0+length*Math.cos(angle);
  y1=y0+length*Math.sin(angle);
  ctx.beginPath();
  ctx.moveTo(x0,y0);
  ctx.lineTo(x1,y1);
  ctx.stroke();
  return({ x0:x0, y0:y0, x1:x1, y1:y1 });
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;