8 
paper.rect(0, 0, settings.width, settings.height, settings.radius);

角の丸い素敵な長方形を作成します。角が1つだけ丸い長方形を作ることはできますか?

4

3 に答える 3

26

Raphael JS を使用する場合:

Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){
  var array = [];
  array = array.concat(["M",x,r1+y, "Q",x,y, x+r1,y]); //A
  array = array.concat(["L",x+w-r2,y, "Q",x+w,y, x+w,y+r2]); //B
  array = array.concat(["L",x+w,y+h-r3, "Q",x+w,y+h, x+w-r3,y+h]); //C
  array = array.concat(["L",x+r4,y+h, "Q",x,y+h, x,y+h-r4, "Z"]); //D

  return this.path(array);
};

右上隅のみを丸めた長方形を作成するには

var paper = Raphael("canvas", 840, 480);
paper.roundedRectangle(10, 10, 80, 80, 0, 20, 0, 0);

ソースとオンラインの例: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/

于 2011-09-05T23:11:46.443 に答える
8

rx丸みを帯びたコーナー機能は、基になるSVGと属性に直接マップされ、ry長方形全体に適用されるため、単一のコーナーに設定するだけの可能性はありません。

このブログ投稿では、基本的に丸めたくないコーナーをカバーするSVGのアプローチについて説明しています。彼の例は現在オフラインになっているように見えますが、このアプローチはSVGにリバースエンジニアリングするのはかなり簡単なはずです。

別のアプローチは、長方形のオブジェクトの代わりにパスを使用して、自分で輪郭全体を描くことです。構文は少しわかりにくいですが、何が起こっているのかを理解すれば簡単です。紹介については、 JakobJenkovのSVGパスチュートリアルをお試しください。

于 2010-07-23T15:43:48.677 に答える