公章圆弧字fabric.js画法

<script type="text/javascript">
    var url="网络图片位置";
    $(document).ready(function() {
       initCavans(url);
    });
    //初始化canvans及背景
    var canvas;
    function initCavans(pngPath){
        canvas = this.__canvas = new fabric.Canvas('cer', {
                imageSmoothingEnabled: false,
                enableRetinaScaling: false,
                fireRightClick: false,
                stopContextMenu: false,
        });
        fabric.Object.prototype.transparentCorners = false;
        fabric.Image.fromURL(url,function(oImg){
                    //放图片
                    oImg.setControlsVisibility({
                            mt: false, // middle top disable
                            mb: false, // midle bottom
                            ml: false, // middle left
                            mr: false // I think you get it
                        });
                    oImg.set({
                            width:oImg.width,
                            height:oImg.height,
                            originX: 'center',
                            originY: 'center'
                        });
                //画轮廓
                  var circle = new fabric.Circle({
                        left:200,
                        top:115,
                        radius: 70,
                        stroke: 'red',
                        strokeWidth: 2,
                        fill: 'transparent',
                        originX: 'center',
                        originY: 'center'
                 });
                 //画部门
                 var department = new fabric.Text('月老民政局',{
                        left:230,
                        top:150,
                        fontFamily:'SumSun',
                        fontSize: 14,
                        fill:'red',
                        angle:-36,
                        originX: 'center',
                        originY: 'center'
                     });
                //算5角星,画五角星
                var str;
                var x = Math.sin(0);
                var y = Math.cos(0);
                var dig = Math.PI / 5 * 4;
                for (var i = 0; i < 5; i++) {//画五角星的五条边
                    var x = Math.sin(i * dig);
                    var y = Math.cos(i * dig);
                     str+=(x * 15)+"\n"+(y * 15)+"\n";
                }
                console.log(str);
                var path = new fabric.Path('M 0 15 L 8.816778784387099 -12.13525491562421 L -14.265847744427305 4.635254915624208 L 14.265847744427303 4.635254915624216 L -8.816778784387092 -12.135254915624214 z');
                 path.set({
                    left:200,
                    top:115, 
                    fill:'red',
                    originX: 'center',
                    originY: 'center'
                });

                var group = new fabric.Group([ oImg, circle, department, path], {
                      left: 100,
                      top: 100,
                      selectable: false,
                      angle: 0
                    });
                 canvas.add(group); 
               //写机构
                var agency ="北京我大森林婚庆公司";
                var count=agency.length;
        var angle = 3*Math.PI/(3*(count - 1)); 
        var agencyArr = agency.split("");
        var agencyAngle;
        var agencyX=385;
        var agencyY=256;
        var agencyparams;
        if(count>0){
            for(var i = 0; i<count; i++){
                 if(i==0){
                    agencyAngle = (4 * Math.PI / 6);
                    agencyparams = {left:agencyX-(56*Math.cos(i*agencyAngle)), top:agencyY-(56*Math.sin(i*agencyAngle)),angle:-90,fontSize:16,selectable:false,borderScaleFactor:1,fontFamily:'SumSun',fill:'#f00'};
                }else{
                    agencyAngle = angle;
                    agencyparams = {left:agencyX-(56*Math.cos(i*agencyAngle)), top:agencyY-(56*Math.sin(i*agencyAngle)),angle:-90+(i*angle*58),fontSize:16,selectable:false,borderScaleFactor:1,fontFamily:'SumSun',fill:'#f00'};
                }
                var text = new fabric.Text(agencyArr[i],agencyparams);
                canvas.add(text);
            }       
        }
                    canvas.add(text);
                } 

        });
    }

</script>

这里写图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值