<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>
公章圆弧字fabric.js画法
最新推荐文章于 2024-07-30 17:53:07 发布