公章圆弧字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>
阅读全文
0 0
- 公章圆弧字fabric.js画法
- 个性印章及公章的画法及实现
- C#个性印章及公章的画法及实现
- Fabric.js
- Fabric.js的学习
- Fabric.js学习笔记
- 系统层级图JS画法
- HTML5之Canvas绘图——半圆与圆弧的不同画法
- Hyperledger fabric配置node.js
- canvas fabric.js api梳理
- 关于Raphael.js 的画圆弧
- fabric
- fabric
- fabric
- Fabric
- fabric
- fabric
- fabric
- spring boot异步设计接口
- 【学习笔记】Python的输入输出
- inception-v3迁移学习
- 装饰者模式和代理模式的区别
- Http协议
- 公章圆弧字fabric.js画法
- Python3与OpenCV3.3 图像处理(十四)--模板匹配
- Notepad++选中行操作 快捷键 使用技巧
- Java 总结 1202/1203
- win7设置共享文件夹
- 浅谈Python中的装饰器
- 48. Rotate Image
- Java中的线程池(4)----ScheduledThreadPool
- 第一次发文