createCircle Stroke colour about vue-fabric

[ll931217]

Further testing shows that strokeWidth isn't working either. I changed:

app.$refs.canvas.createCircle({
  left: 50,
  top: 50,
  fill: 'red',
  radius: 10,
  stroke: 'blue',
  strokeWidth: 3
})

to

app.$refs.canvas.createCircle({
  left: 50,
  top: 50,
  fill: 'red',
  radius: 10,
  stroke: 'blue',
  strokeWidth: 9
})

There isn't any noticeable difference

[purestart]

you can use property drawWidth or update ***@***.*** app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', drawWidth: 3 }) thanks!

…

------------------ 原始邮件 ------------------ 发件人: "purestart/vue-fabric" ***@***.***>; 发送时间: 2021年4月21日(星期三) 下午2:31 ***@***.***>; ***@***.***>; 主题: Re: [purestart/vue-fabric] createCircle Stroke colour (#39) Further testing shows that strokeWidth isn't working either. I changed: app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', strokeWidth: 3 }) to app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', strokeWidth: 9 }) There isn't any noticeable difference — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ll931217]

you can use property drawWidth or update @.*** app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', drawWidth: 3 }) thanks!
…
------------------ 原始邮件 ------------------ 发件人: "purestart/vue-fabric" @.>; 发送时间: 2021年4月21日(星期三) 下午2:31 @.>; @.***>; 主题: Re: [purestart/vue-fabric] createCircle Stroke colour (#39) Further testing shows that strokeWidth isn't working either. I changed: app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', strokeWidth: 3 }) to app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', strokeWidth: 9 }) There isn't any noticeable difference — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

Hey! So I was able to get the drawWidth to work, however stroke doesn't work. It is still displaying 'grey' colour.

[purestart]

you can set every element a id and then search by id , property can be method obj.set('property': value) app.$refs.canvas.createCircle({id : 'myCircle', left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', strokeWidth: 3 })       let arr = this.$refs.canvas.getObjects();       if (arr.length > 0) {         let circleEle = arr.find((e) => e.id == "myCircle");         circleEle.set('fill','blue');         circleEle.set('radius',100);         this.$refs.canvas.renderAll();       }

…

------------------ 原始邮件 ------------------ 发件人: "purestart/vue-fabric" ***@***.***>; 发送时间: 2021年4月21日(星期三) 下午3:29 ***@***.***>; 抄送: "单纯Dé开始♥ ***@***.******@***.***>; 主题: Re: [purestart/vue-fabric] createCircle Stroke colour (#39) you can use property drawWidth or update @.*** app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', drawWidth: 3 }) thanks! … ------------------ 原始邮件 ------------------ 发件人: "purestart/vue-fabric" @.>; 发送时间: 2021年4月21日(星期三) 下午2:31 @.>; @.***>; 主题: Re: [purestart/vue-fabric] createCircle Stroke colour (#39) Further testing shows that strokeWidth isn't working either. I changed: app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', strokeWidth: 3 }) to app.$refs.canvas.createCircle({ left: 50, top: 50, fill: 'red', radius: 10, stroke: 'blue', strokeWidth: 9 }) There isn't any noticeable difference — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe. Hey! So I was able to get the drawWidth to work, however stroke doesn't work. It is still displaying 'grey' colour. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ll931217]

I fixed it like this:

curr.forEach(point => {
  const { x, y } = pointConverter(false, parseInt(point.x), parseInt(point.y))

  console.log('Point:', point.type, app.mapPointsSettings[point.type].fill)

  const obj = new fabric.Circle({
    id: point.id,
    objType: point.objType,
    hasControls: false,
    fill: app.mapPointsSettings[point.type].fill,
    stroke: app.mapPointsSettings[point.type].stroke,
    strokeWidth: app.mapPointsSettings[point.type].strokeWidth,
    radius: app.mapPointsSettings[point.type].radius,
    pointType: point.type,
    originX: 'center',
    originY: 'center',
    left: x,
    top: y,
    selectabled: false,
    lockMovementX: true,
    lockMovementY: true
  })

  app.canvas.add(obj)
})

app.canvas.renderAll()

Thanks for your time