我试图用fabricjs画semecircle(部门):如何在布料js中绘制扇形(不是圆弧)?
$('#button').click(function(){
fov+=10;
drawSector(fov);
});
$('#button2').click(function(){
fov-=10;
drawSector(fov);
});
var w=500,h=500;
var R = 100;
var fov = 75.0;
var lastFOV;
var ele = {
center: {x: 0.5, y:0.5},
focal: {x: 0.5, y: 0.5},
radius: 0.6,
transform: {
rotate: 0,
translate: {
x: 0,
y: 0,
},
scale: {
x: 1,
y: 1,
}
},
stops: [
{offset: '0', color: "purple",alpha:'0.75'},
{offset: '0.9', color: "transparent",opacity:'0'}
]
};
var tr_str = "rotate("+ele.transform.rotate+",0.5,0.5) translate("+ele.transform.translate.x*w+","+ele.transform.translate.y*h+") scale("+ele.transform.scale.x+","+ele.transform.scale.y+")";
var tr_matrix = fabric.parseTransformAttribute(tr_str);
var rg = {
type: 'radial',
x1: ele.center.x,
y1: ele.center.y,
r1: 0,
x2: ele.focal.x,
y2: ele.focal.y,
r2: R,
//transformMatrix: [1,0,0,2,0,0],
//gradientTransform: [1,0,0,2,0,0],
gradientTransform: tr_matrix,
colorStops: (function(){
var color_stops = {};
for(var i=0;i<ele.stops.length;i++){
color_stops[ele.stops[i].offset] = ele.stops[i].color;
}
return color_stops;
})()
};
var HideControls = {
'tl':false,
'tr':false,
'bl':false,
'br':false,
'ml':false,
'mt':false,
'mr':false,
'mb':false,
'mtr':true
};
var canvas = new fabric.Canvas('canvas1');
canvas.setWidth(w);
canvas.setHeight(h);
var x,y,my,startPoints;
var sector;
var rotationAngle = 0;
drawSector(fov);
function drawSector(fov){
$('#fov').html("FOV = "+fov);
x = Math.cos(fov*Math.PI/180.0)*R;
y = Math.sin(fov*Math.PI/180.0)*R;
my = -Math.sin(fov/2.*Math.PI/180.0)*R/2.;
startPoints = [
{x: 0, y: 0},
{x: R, y: 0},
{x: x, y: y}
];
if(sector) {
rotationAngle = sector.angle;
canvas.remove(sector);
}
sector = new fabric.Polygon(startPoints,{
left: w/2,
top: h/2,
originX:'left',
originY:'top',
centeredRotation:false,
hasBorders:false,
lockMovementX:true,
lockMovementY:true,
rotatingPointOffset:my,
width: R,
height: R
});
sector.setControlsVisibility(HideControls);
sector.setGradient('fill', rg);
rotationAngle = rotationAngle==0?-fov/2:rotationAngle-(fov-lastFOV)/2;
sector.setAngle(rotationAngle);
canvas.add(sector);
lastFOV = fov;
}
https://jsfiddle.net/2v0es4xh/35/
但是当FOV是大于90度,的rotationX/Y正在发生变化。
有一个在单张http://jieter.github.io/Leaflet-semicircle/examples/semicircle.html
东西这将是巨大的,如果我能画半圆这样使用的织物。 有没有人试图做到这一点?
预先感谢您。
可能重复[如何在Fabric.js中绘制圆弧](https://stackoverflow.com/questions/25979688 /如何在绘制弧 - 在织物-JS) –
我不想画弧! – imudin07
你想要一个半圆,那不是圆弧? –