公章圆弧字fabric.js画法

来源:互联网 发布:手机淘宝怎么激活店铺 编辑:程序博客网 时间:2024/04/28 13:58
<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>

这里写图片描述

原创粉丝点击