Question

我必须创建椭圆形的画布，下面是我的代码，使用j查询和创建的画布对象

 $("#decalshap").change(function() {
         alert("decal");
         var shap = $(this).val();
    if(shap=="oval")
        {
        //var canvas = new fabric.Canvas({
        canvas.add(new fabric.Canvas({
          left: 170,
        top: 150,
          width: 100,
        height: 50,
        angle: 0,
        fill: "red"  
          }))    
         }  
     });

Answer 1

这是整个解决方案画布布局的不同形状椭圆形，矩形，垂直矩形，水平矩形。 1）在ht-ml中添加select选项2）在ht-ml中添加add div 3）添加脚本，你也可以在fabric js

中使用它

<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);
       }
       });

创建不同形状的画布，如椭圆形矩形圆

1 个答案: