公章圆弧字fabric.js画法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/rentian1/article/details/78747255
<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>

这里写图片描述

展开阅读全文

圆弧

03-21

☆ Java程序员居家旅行必备课程 ☆<br />rn<br />rnJava学习指南系列的第4篇,介绍基于Java Swing的的高级应用技术。本篇的前一篇是Swing入门篇。<br />rnSwing系列教程分为两篇:(1) Swing入门篇 (2) Swing高级篇。<br />rn<br />rn本篇内容至少包含:<br />rn- 高级绘制技术,包含线型、渐变色、文本的精确绘制<br />rn- 不规则形状及图表的绘制<br />rn- 工作线程与界面线程的原理<br />rn- 短任务、长任务、定时任务的应用举例<br />rn- 弹出式窗口 Popup的使用方法<br />rn- 短消息提示 Toaster 的设计与使用<br />rn- 事件处理机制,鼠标键盘事件处理,以及一个基于键盘操作的“推箱子”游戏&nbsp;<br />rn- 多行文本的显示<br />rn- 图片操作:缩放、剪裁、旋转、镜像,以及一个屏幕截图程序的实例<br />rn- 管理型应用界面的框架<br />rn- 向导型应用界面的框架<br />rn- 文档型应用界面的框架<br />rn- 拖放支持 Drag &amp; Drop,一个可拖拽排序的列表,以及一个拼图游戏的实现<br />rn<br />rn* 课程特色 *<br />rn轻快 - 采用小章节教学,学起来轻松<br />rn实用 - 以实际工程需要出发来设计课程<br />rn有趣 - 穿插大量特效实例,增加趣味性和学员的成就感<br />rn专业 - 课程中采用的代码库,就是经过良好封装的成熟的库<br />rn<br />rn本篇穿插多个实例,通过实例,综合运用多种技术,使学员对项目的构建有所有认识。<br />

没有更多推荐了,返回首页