用reactjs在画布上绘制4个圆

我试图在画布图像中绘制多色圆圈。当我画一个圆时，上一个圆被删除了。所以我做了一个函数来复制上一个圆，但是在那里我无法得到圆心的精确坐标，并且创建了一条直线。我正在分享我的代码。 在“绘制圆”功能中，我需要正确的centerx和centery

类圆扩展组件{
建造师（道具）{
超级（道具）；
//附加状态
此.state={
伊斯敦：错，
previousPointX:“”，
前一点：''，
基本映像：{}，
circleConfig：{
maxCircle:4，
颜色：[“红”、“蓝”、“绿”]
},
圆圈：[]，
canvasId:this.props.canvasId，
旋转：this.props.rotate
}
this.handleMouseDown=this.handleMouseDown.bind（this）；
this.handleMouseMove=this.handleMouseMove.bind（this）；
this.handleMouseUp=this.handleMouseUp.bind（this）；
}
render（）{
返回(
{
设nativeEvent=e.nativeEvent；
这个.handleMouseDown（nativeEvent）；
}}
移动={
e=>{
设nativeEvent=e.nativeEvent；
本.handleMouseMove（nativeEvent）；
}}
上厕所={
e=>{
设nativeEvent=e.nativeEvent；
这个.handleMouseUp（nativeEvent）；
}}
/>
{JSON.stringify（this.state.lines，null，2）}
);
}
drawCircle（圆圈，ctx）{
console.log（'draw circle'，circles）
圆圈。forEach（（项目）=>{
var r=（item.endx item.startx）/2；
var centerx=（item.endx item.startx）/2；
变量centery=（item.endy item.starty）/2；
ctx.arc（centerx，centery，r，0，2*Math.PI）；
ctx.strokeStyle=item.color；
})
}
handleMouseDown（事件）{
如果（this.state.circles.length>=this.state.circleConfig.maxCircle）返回；
这是我的国家({
伊斯敦：是的，
previousPointX:event.offsetX，
前一点：event.offsetY
},()=>{
console.log（'mousedown'，this.state）
})
}
handleMouseMove（事件）{
if（this.state.isDown）{
event.preventDefault（）；
event.stopPropagation（）；
const canvas=ReactDOM.findDOMNode（this.refs.canvas）；
var x=事件补偿x；
变量y=event.offsetY；
var ctx=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（this.state.base_图像，0,0）；
//拯救
ctx.save（）；
ctx.beginPath（）；
this.drawCircle（this.state.circles，ctx）；
var circleLength=this.state.circles.length | | 0；
//动态缩放
var scalex=（x-this.state.previousPointX）/2；
var scaley=（y-this.state.previousPointY）/2；
ctx.scale（scalex，scaley）；
//创建椭圆
var centerx=（this.state.previousPointX/scalex）+1；
var centery=（this.state.previousPointY/scaley）+1；
ctx.arc（centerx，centery，1,0,2*Math.PI）；
ctx.restore（）；
ctx.stroke（）；
ctx.strokeStyle=this.state.circleConfig.color[circleLength]；；
}
}
handleMouseUp（活动）{
如果（this.state.circles.length>=this.state.circleConfig.maxCircle）返回；
这是我的国家({
伊斯敦：错
});
console.log（'mouseup'，this.state）
const canvas=ReactDOM.findDOMNode（this.refs.canvas）；
var x=事件补偿x；
变量y=event.offsetY；
var ctx=canvas.getContext（“2d”）；
var circleLength=this.state.circles.length | | 0；
if（this.state.previousPointX！==x&&this.state.previousPointY！==y）{
这是我的国家({
圆圈：this.state.circles.concat({
startx:this.state.previousPointX，
斯塔蒂：这个，州，以前的意思，
(完):，
恩迪：嗯，
颜色：this.state.circleConfig.color[circleLength]
})
},
() => {
ctx.stroke（）；
ctx.closePath（）；
this.props.drawCircleToStore（this.state.circles，this.state.canvasId，this.props.imgSrc，this.state.rotate）
}
);
}
}
componentDidMount（）{
const canvas=ReactDOM.findDOMNode（this.refs.canvas）；
const ctx=canvas.getContext（“2d”）；
const base_image=新映像（）；
base_image.src=this.props.imgSrc
base_image.onload=函数（）{
ctx.drawImage（基本图像，0,0）；
}
这是我的国家({
基本图像：基本图像
});
}
}

在绘图圆方法中，中心坐标为

var r = (item.endx - item.startx) / 2;
centerx = (r + item.startx);
centery = (r + item.starty);
ctx.arc(centerx, centery, r, 0, 2 * Math.PI);

类CircleMultiple扩展组件{
建造师（道具）{
超级（道具）；
//附加状态
此.state={
伊斯敦：错，
previousPointX:“”，
前一点：''，
基本映像：{}，
circleConfig：{
maxCircle:4，
},
圆圈：[]，
canvasId:this.props.canvasId，
旋转：this.props.rotate
}
this.handleMouseDown=this.handleMouseDown.bind（this）；
this.handleMouseMove=this.handleMouseMove.bind（this）；
this.handleMouseUp=this.handleMouseUp.bind（this）；
}
render（）{
返回(