fabricjs - Border radius on fabric.js img - Stack Overflow

admin管理员组

文章数量:1416642

Trying to add border radius to imgs on my canvas

const fabricImage = new $FabricImage(resizedImg, {
  id: imageObject.id,
  left: imageObject.left,
  top: imageObject.top,
  scaleX: newWidth / resizedImg.width,
  scaleY: newHeight / resizedImg.height,
  objectCaching: false,
  cornerColor: "#FFF",
  cornerStyle: "circle",
  borderColor: "#B2CCFF",
  borderScaleFactor: 1.5,
  cornerStrokeColor: "#B2CCFF",
  cornerSize: 11,
  transparentCorners: false,
  cornerOpacityWhenMoving: 0.1,
  bgRemoved: false,
  bgHasBeenRemoved: false,
  selectable: true,
  fullWidth: imageObject.width,
  fullHeight: imageObject.height,
  originalUrl: objectUrl,
  clipPath: new $fabric.Rect({
    width: resizedImg.width,
    height: resizedImg.height,
    rx: 20,
    ry: 20,
    originX: "center",
    originY: "center",
  }),  
});

works, but the performance on mobile is TERRIBLE. when i remove

clipPath: new $fabric.Rect({
    width: resizedImg.width,
    height: resizedImg.height,
    rx: 20,
    ry: 20,
    originX: "center",
    originY: "center",
  }),

performance is back to normal. am i missing something? looked at a bunch of questions on here and everyone says clipPath. thanks

本文标签： fabricjsBorder radius on fabricjs imgStack Overflow