Question

[这是我之前的问题Very wide thin curly braces with css or jquery]

的后续跟进

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var y = canvas.height;
  var linelength = ( y - 60 ) / 2;

  context.lineWidth = 4;
  context.beginPath();
  context.moveTo(27,10);
  context.arcTo(20,10,20,20,7);

  context.lineTo(20,20+linelength);
  context.arcTo(20,30+linelength,0,30+linelength,7);
  context.arcTo(20,30+linelength,20,40+linelength,7);
  context.lineTo(20,y-20);
  context.arcTo(20,y-10,30,y-10,7);

  context.stroke();

有没有更简单/更好的方法来获得它？

Answer 1

我并不完全清楚，但我认为这是你想要的效果：

wide curly left brace

这个怎么样：jsFiddle

HTML：

<div class="curly"></div>

JS：

var $brace;

$('.curly').each(function(idx, curly) {

    for (var i=0; i < 20; i++) {
        $brace = $('<span>{</span>');
        $brace.css({left: i});
        $brace.appendTo(curly);
    }

});

CSS：

.curly {
    position: relative;
    height: 3em;
}

.curly span {
    position: absolute;
    font-size: 3em;
}

Answer 2

您可以使用d3.js，like this：

＆＃13;

//returns path string d for <path d="This string">
//a curly brace between x1,y1 and x2,y2, w pixels wide 
//and q factor, .5 is normal, higher q = more expressive bracket 
function makeCurlyBrace(x1, y1, x2, y2, w, q) {
  //Calculate unit vector
  var dx = x1 - x2;
  var dy = y1 - y2;
  var len = Math.sqrt(dx * dx + dy * dy);
  dx = dx / len;
  dy = dy / len;

  //Calculate Control Points of path,
  var qx1 = x1 + q * w * dy;
  var qy1 = y1 - q * w * dx;
  var qx2 = (x1 - .25 * len * dx) + (1 - q) * w * dy;
  var qy2 = (y1 - .25 * len * dy) - (1 - q) * w * dx;
  var tx1 = (x1 - .5 * len * dx) + w * dy;
  var ty1 = (y1 - .5 * len * dy) - w * dx;
  var qx3 = x2 + q * w * dy;
  var qy3 = y2 - q * w * dx;
  var qx4 = (x1 - .75 * len * dx) + (1 - q) * w * dy;
  var qy4 = (y1 - .75 * len * dy) - (1 - q) * w * dx;

  return ("M " + x1 + " " + y1 +
    " Q " + qx1 + " " + qy1 + " " + qx2 + " " + qy2 +
    " T " + tx1 + " " + ty1 +
    " M " + x2 + " " + y2 +
    " Q " + qx3 + " " + qy3 + " " + qx4 + " " + qy4 +
    " T " + tx1 + " " + ty1);
}

function update() {
  var bracket = d3.select("svg").selectAll("path").attr("class", "curlyBrace").data(coords);

  bracket.enter().append("path").attr("class", "curlyBrace");
  bracket.attr("d", function(d) {
    return makeCurlyBrace(d.x1, d.y1, d.x2, d.y2, 50, 0.6);
  });
  bracket.exit().remove();

  coords.shift();
}

var width = 962;
var height = 502;
var coords = [];
var clickPos = {};

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .on("mousedown", function() {
    clickPos = {
      "x1": d3.mouse(this)[0],
      "y1": d3.mouse(this)[1]
    };
  })
  .on("mouseup", function() {
    coords.push({
      "x1": clickPos.x1,
      "y1": clickPos.y1,
      "x2": d3.mouse(this)[0],
      "y2": d3.mouse(this)[1]
    });
    update();
  });

＆＃13;

.curlyBrace {
  stroke: #000000;
  stroke-width: 10px;
  fill: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body ontouchmove="BlockMove(event);">
  <p> Click and Drag to draw a bracket </p>
</body>

＆＃13;

css / jquery：在可变高度的花括号上

2 个答案: