5

キャンバスでctx.clipプロパティを使用して滑らかな楕円形を描画しようとしています.楕円形の弧線の明瞭さの問題に直面している部分の描画を完了しました.これについて何か考えがある人は教えてください? これが私のコードです。

<canvas id="c" width="400" height="400"></canvas>


var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext('2d');
var cx=180;
var cy=200;
var w=300;
var h=250;
    // Quadratric curves example
    ctx.beginPath();
    var lx = cx - w/2,
        rx = cx + w/2,
        ty = cy - h/2,
        by = cy + h/2;
    var magic = 0.551784;
    var xmagic = magic*w/2;
    var ymagic = h*magic/2;
    ctx.moveTo(cx,ty);
    ctx.bezierCurveTo(cx+xmagic,ty,rx,cy-ymagic,rx,cy);
    ctx.bezierCurveTo(rx,cy+ymagic,cx+xmagic,by,cx,by);
    ctx.bezierCurveTo(cx-xmagic,by,lx,cy+ymagic,lx,cy);
    ctx.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);

    ctx.fill();
    ctx.stroke();
    ctx.clip();



var text;
text = new fabric.Text('Honey', {
  fontSize: 50,
  left: 150,
  top: 150,
  lineHeight: 1,
  originX: 'left',
  fontFamily: 'Helvetica',
  fontWeight: 'bold'
});
canvas.add(text);

ここに私のフィドルリンクがあります

この出力を見ると、楕円形の境界線があまり明確ではありません。 ここにスクリーンショットの出力があります

4

5 に答える 5

3

これを試してみてください。//スクリプトが役立ちます

var canvas = new fabric.Canvas('c');
 var w;
 var h;
 var ctx = canvas.getContext('2d');
 w=canvas.width / 4;
 h=canvas.height / 2.4;
canvas.clipTo = function(ctx) {
 ctx.save();
 ctx.scale(2, 1.2);
 ctx.arc(w, h, 90, 0, 2 * Math.PI, true);
 ctx.stroke();
 ctx.restore();
}

フィドルのデモ

于 2013-09-30T05:56:10.487 に答える
2

1つの問題は、ディスプレイ画面の性質にあります...

ピクセルは長方形であり、曲線を描いているため、曲線が長方形のスペースに収まろうとするため、結果に「ジャギー」が生じます。

目の錯覚を使って、ギザギザの少ない楕円形に目をだますことができます。

光学トリック:

背景色と楕円形の色のコントラストを下げます。

これは治療法ではありません...ジャギーはまだそこにあります.

しかし、目はより少ないコントラストを認識し、楕円形をより滑らかに認識します。

したがって、デザインがこのスタイルの変更に対応している場合、この目の錯覚が役立つ可能性があります.

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/vDWR3/

var cx=180;
var cy=200;
var w=300;
var h=250;

// Start with a less-contrasting background
ctx.fillStyle="#ddd";
ctx.fillRect(0,0,canvas.width,canvas.height);

ctx.beginPath();
var lx = cx - w/2,
    rx = cx + w/2,
    ty = cy - h/2,
    by = cy + h/2;
var magic = 0.551784;
var xmagic = magic*w/2;
var ymagic = h*magic/2;
ctx.moveTo(cx,ty);
ctx.bezierCurveTo(cx+xmagic,ty,rx,cy-ymagic,rx,cy);
ctx.bezierCurveTo(rx,cy+ymagic,cx+xmagic,by,cx,by);
ctx.bezierCurveTo(cx-xmagic,by,lx,cy+ymagic,lx,cy);
ctx.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);

ctx.fillStyle="#555";
ctx.strokeStyle=ctx.fillStyle;
ctx.lineWidth=1.5;
ctx.stroke();
于 2013-09-28T15:45:58.923 に答える
1

これは別の代替ルーチンですが、視覚的には他の方法と同じように見えます。これは主にディスプレイ デバイスの有限解像度に関係していますが、より太い鉛筆、目の錯覚、アンチエイリアシングの実行を使用して改善できる場合があります。そうでなければ、あなたが持っているものを受け入れなければならないと思います。

Javascript

var canvas = new fabric.Canvas('c'),
    ctx = canvas.getContext("2d"),
    steps = 100,
    step = 2 * Math.PI / steps,
    h = 200,
    k = 180,
    r = 150,
    factor = 0.8,
    theta,
    x,
    y,
    text;

ctx.beginPath();

for (theta = 0; theta < 2 * Math.PI; theta += step) {
    x = h + r * Math.cos(theta);
    y = k - factor * r * Math.sin(theta);
    ctx.lineTo(x, y);
}

ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.clip();

text = new fabric.Text('Honey', {
    fontSize: 50,
    left: 150,
    top: 150,
    lineHeight: 1,
    originX: 'left',
    fontFamily: 'Helvetica',
    fontWeight: 'bold'
});

canvas.add(text);

jsfiddle

注: ステップ数と係数を変更することで、他の形状を作成できます: 円、正方形、六角形、その他の多角形 ....

于 2013-09-28T15:58:25.407 に答える
0

より太い線を使用する可能性があります。それは素晴らしいことではありませんが、より良いです

ctx.lineWidth = 3;

http://jsfiddle.net/xadqg/7/

また、 http://jsfiddle.net/d4JJ8/298/quadraticCurveToという行を使用するとアンチエイリアスのように見えることに気付きました。コードを変更して使用することはしませんでしたが、投稿したjsfiddleはそれが真実であることを示しています。コードを変更して試してみてください

于 2013-09-28T14:03:37.737 に答える