Холст различной формы с плагином fabricjs

Question

Холст различной формы с плагином fabricjs

0

Я пытаюсь установить форму холста в круг и любой другой щелчок кнопки. но обычный клип не работает с fabricjs. вы можете поделиться простым примером формы холста для моей справки?

Я использую fabricjs, я пытался использовать код ниже и многое другое, но ничего не работало.

canvas.clipTo = function(ctx) {
     // clip to a circle circle
     ctx.rect(10,20,300,200);
     ctx.stroke();
     };

anam 24 сен. 2013, в 11:25

Источник

Теги:

javascript

jquery

html

canvas

fabricjs

2 ответа

Ещё вопросы

luckyamit · Answer 1 · 2013-09-28T09-34-00.000Z

попробуйте этот скрипт, чтобы преобразовать Canvas в круглые фигуры с помощью fabricjs.You можете обрезать ваш холст в любой форме, используя функцию clipTo поскольку я clipTo мой холст в форме круга

//HTML

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

//скрипт

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'red';
var w=canvas.width / 2;
var h=canvas.height / 2;
canvas.clipTo = function(ctx) {

 //ctx.scale(2, 1);
ctx.arc(w, h, 150, 0, Math.PI * 2,true);

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

//CSS

canvas {  border:1px solid #000;     }
.controles {  margin:50px 0;   }

Вот моя демонстрационная фантазия, которая поможет вам.

Здравствуйте, ваше сообщение было помечено как "низкое качество", вероятно, потому что оно состоит исключительно из кода. Вы могли бы значительно улучшить свой ответ, предоставив объяснение того, как именно и почему это отвечает на вопрос?

Sanjay Nakate · Answer 2 · 2013-09-24T07-09-00.000Z

Попробуйте эту надежду поможет вам.

<select name="Decal Shape" id="decalshap" class="hasClass" style="height:30px;">
<option > Select Shape </option>
<option value="oval"> OVAL </option>
<option value="circle"> CIRCLE </option>
<option value="rectangle">RECTANGLE</option>
<option value="hrectangle"> HORIZONTAL RECTANGLE </option>
<option value="vrectangle"> VERTICAL RECTANGLE </option>
</select>
<div id="work_area">
</div>

    $("#decalshap").change(function() {
         alert("decal");
         var shap = $(this).val();
     if(shap=="oval")
        {
         var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:600
    }).appendTo('#work_area');
     var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   // ctx.fillStyle='rgba(70, 70, 255, 0.7)'
   // ctx.fillRect(20,20,150,100);
    var centerX = 0;
      var centerY = 0;
      var radius = 50;
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.scale(2, 1);
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.restore();
      ctx.fillStyle = '#8ED6FF';
      ctx.fill();
      ctx.lineWidth = 5;
      ctx.strokeStyle = 'black';
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    }  
    if(shap=="circle")
        {
          var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:600
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
       }
       if(shap=="hrectangle")
        {
        var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:300
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   ctx.fillStyle='border: 1px dotted';
    ctx.fillRect(0,0,200,400);
       }
       if(shap=="vrectangle")
        {
          var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:300,
        height:600
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   ctx.fillStyle='border: 1px dotted';
    ctx.fillRect(0,0,400,200);
       }
       });