Package 'fabricerin' reference manual

Title:	Create Easily Canvas in 'shiny' and 'RMarkdown' Documents
Description:	Allows the user to implement easily canvas elements within a 'shiny' app or an 'RMarkdown' document. The user can create shapes, images and text elements within the canvas which can also be used as a drawing tool for taking notes. The package relies on the 'fabricjs' 'JavaScript' library. See <http://fabricjs.com/>.
Authors:	Mohamed El Fodil Ihaddaden [aut, cre], Garrick Aden-Buie [ctb], fabricjs contributors [ctb, cph] (fabricjs JavaScript library), jQuery contributors [ctb, cph] (jQuery JavaScript library), FileSaver.js contributors [ctb, cph] (FileSaver JavaScript library)
Maintainer:	Mohamed El Fodil Ihaddaden <[email protected]>
License:	AGPL (>= 3)
Version:	0.1.2
Built:	2024-11-03 02:48:26 UTC
Source:	https://github.com/feddelegrand7/fabricerin

Add a background or an overlay image to a preexisting canvas

Description

Add a background or an overlay image to a preexisting canvas

Usage

fabric_curtail(cid, imgsrc, type = "background")
fabric_curtail(cid, imgsrc, type = "background")

Arguments

`cid`	the id of the canvas element
`imgsrc`	the URL source of the image
`type`	whether to use an image as a 'background' or as an 'overlay'

Value

a canvas with a background or overlay image

Examples


if (interactive()) {

img <- "https://st.depositphotos.com/1642482/1904/i/950/depositphotos_19049237-stock-photo-leaf.jpg"

ui <- fluidPage(



fabric_shape(cid = "canvas123",
             shapeId = "tri1",
             shape = "Triangle",
             fill = "darkblue"),

fabric_curtail(cid = "canvas123",
             imgsrc = img,
             type = "background"

             )

)

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

}
if (interactive()) {

img <- "https://st.depositphotos.com/1642482/1904/i/950/depositphotos_19049237-stock-photo-leaf.jpg"

ui <- fluidPage(



fabric_shape(cid = "canvas123",
             shapeId = "tri1",
             shape = "Triangle",
             fill = "darkblue"),

fabric_curtail(cid = "canvas123",
             imgsrc = img,
             type = "background"

             )

)

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

}

Create a canvas element for drawing

Description

Create a canvas element for drawing

Usage

fabric_drawing(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  drawingWidth = 2,
  gumSize = 10
)
fabric_drawing(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  drawingWidth = 2,
  gumSize = 10
)

Arguments

`cid`	the id of the canvas element
`cwidth`	the width of the canvas element
`cheight`	the height of the canvas element
`cfill`	the color of the canvas element. Default to #FFFFFF (white)
`drawingWidth`	the width of the drawing output. Default to 2
`gumSize`	specify the size of the gum. Defaults to 10

Value

an HTML canvas element

Examples

if (interactive()) {

ui <- fluidPage(


   h1("Draw some stuff here"),

   fabric_drawing(cid = "canvas1")

   )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}
if (interactive()) {

ui <- fluidPage(


   h1("Draw some stuff here"),

   fabric_drawing(cid = "canvas1")

   )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}

Insert external images inside canvas element

Description

Insert external images inside canvas element

Usage

fabric_image(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  imgId,
  imgsrc,
  imgwidth = 500,
  imgheight = 500,
  left = 100,
  top = 100,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 1,
  selectable = TRUE,
  isDrawingMode = FALSE
)
fabric_image(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  imgId,
  imgsrc,
  imgwidth = 500,
  imgheight = 500,
  left = 100,
  top = 100,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 1,
  selectable = TRUE,
  isDrawingMode = FALSE
)

Arguments

`cid`	the id of the canvas element
`cwidth`	the width of the canvas element. Defaults to 800
`cheight`	the height of the canvas element. Defaults to 600
`cfill`	the color of the canvas element
`imgId`	the id of the image
`imgsrc`	the URL source of the image
`imgwidth`	the width of the image. Defaults to 500
`imgheight`	the height of the image. Defaults to 500
`left`	the image's position from the left relative to the canvas element. Defaults to 100
`top`	the image's position from the top relative to the canvas element. Defaults to 100
`angle`	the angle of rotation of the image. Defaults to 0 (no rotation)
`opacity`	the opacity of the image (from 0 to 1). Defaults to 1
`strokecolor`	the stroke color of the image. Defaults to 'darkblue'
`strokewidth`	the stroke width of the image. Defaults to 1
`selectable`	logical. If TRUE, the user can modify interactively the image's size, position and rotation. Defaults to TRUE
`isDrawingMode`	logical. If TRUE, the user can draw inside the canvas element.

Value

an image inside a canvas element

Examples



if (interactive()) {

img <- "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/724px-R_logo.svg.png"

ui <- fluidPage(


fabric_image(cid = "cimage",
             cfill = "lightblue",
             imgId = "Rimg",
             imgsrc = img)

             )

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

}

if (interactive()) {

img <- "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/724px-R_logo.svg.png"

ui <- fluidPage(


fabric_image(cid = "cimage",
             cfill = "lightblue",
             imgId = "Rimg",
             imgsrc = img)

             )

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

}

Add an image to a preexisting canvas element

Description

Add an image to a preexisting canvas element

Usage

fabric_image_add(
  cid,
  imgId,
  imgsrc,
  imgwidth = 500,
  imgheight = 500,
  left = 100,
  top = 100,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 1,
  selectable = TRUE
)
fabric_image_add(
  cid,
  imgId,
  imgsrc,
  imgwidth = 500,
  imgheight = 500,
  left = 100,
  top = 100,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 1,
  selectable = TRUE
)

Arguments

`cid`	the id of the canvas element you want to add your image to
`imgId`	the of the image
`imgsrc`	the URL source of the image
`imgwidth`	the width of the image. Defaults to 500
`imgheight`	the height of the image. Defaults to 500
`left`	the image's position from the left relative to the canvas element. Defaults to 100
`top`	the image's position from the top relative to the canvas element. Defaults to 100
`angle`	the angle of rotation of the image. Defaults to 0 (no rotation)
`opacity`	the opacity of the image (from 0 to 1). Defaults to 1
`strokecolor`	the stroke color of the image. Defaults to 'darkblue'
`strokewidth`	the stroke width of the image. Defaults to 1
`selectable`	logical. If TRUE, the user can modify interactively the image's size, position and rotation. Defaults to TRUE

Value

an image inside a preexisting canvas element

Examples

if (interactive()) {

img1 <- "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/724px-R_logo.svg.png"
img2 <- "https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/dplyr.png"
ui <- fluidPage(


fabric_image(cid = "cimage",
             imgId = "Rimg",
             imgsrc = img1,
             imgheight = 200,
             imgwidth = 200),

fabric_image_add(cid = "cimage",
                 imgId = "rstudioimg",
                 imgsrc = img2,
                 imgwidth = 200,
                 imgheight = 200,
                 left = 400)
                 )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}
if (interactive()) {

img1 <- "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/724px-R_logo.svg.png"
img2 <- "https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/dplyr.png"
ui <- fluidPage(


fabric_image(cid = "cimage",
             imgId = "Rimg",
             imgsrc = img1,
             imgheight = 200,
             imgwidth = 200),

fabric_image_add(cid = "cimage",
                 imgId = "rstudioimg",
                 imgsrc = img2,
                 imgwidth = 200,
                 imgheight = 200,
                 left = 400)
                 )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}

Create shapes inside a canvas

Description

Create shapes inside a canvas

Usage

fabric_shape(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  shapeId,
  shape = "Rect",
  left = 100,
  top = 100,
  fill = "red",
  width = 200,
  height = 200,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 5,
  selectable = TRUE,
  isDrawingMode = FALSE,
  radius = NULL,
  xPolygon = NULL,
  yPolygon = NULL
)
fabric_shape(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  shapeId,
  shape = "Rect",
  left = 100,
  top = 100,
  fill = "red",
  width = 200,
  height = 200,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 5,
  selectable = TRUE,
  isDrawingMode = FALSE,
  radius = NULL,
  xPolygon = NULL,
  yPolygon = NULL
)

Arguments

`cid`	the id of the canvas element
`cwidth`	the width of the canvas element. Defaults to 800
`cheight`	the height of the canvas element. Defaults to 600
`cfill`	the color of the canvas element
`shapeId`	the id of the shape object
`shape`	the shape of the object. Choices include 'Circle', 'Triangle' and 'Rect'. Defaults to 'Rect'
`left`	the shape's position from the left relative to the canvas element. Defaults to 100
`top`	the shape's position from the top relative to the canvas element. Defaults to 100
`fill`	the color of the shape. Defaults to 'red'
`width`	the width of the shape. Defaults to 200
`height`	the height of the shape. Defaults to 200
`angle`	the angle of rotation of the shape. Defaults to 0 (no rotation)
`opacity`	the opacity of the shape (from 0 to 1). Defaults to 1
`strokecolor`	the stroke color of the shape. Defaults to 'darkblue'
`strokewidth`	the stroke width of the shape. Defaults to 5.
`selectable`	logical. If TRUE, the user can modify interactively the shape's size, position and rotation. Defaults to TRUE
`isDrawingMode`	logical. If TRUE, the user can draw inside the canvas element.
`radius`	mandatory if the chosen shape is a 'Circle'. Defaults to NULL
`xPolygon`	a vector of the coordinate points of the polygon, from the left.
`yPolygon`	a vector of the coordinate points of the polygon, from the top

Value

a shape object inside a canvas

Examples


if(interactive()){

ui <- fluidPage(


h2("Below you'll find a red Rectangle with a darkblue stroke"),

fabric_shape(cid = "canvas", shapeId = "shape1", shape = "Rect")

)

server <- function(input, output) {


}


shinyApp(ui = ui, server = server)

}

if(interactive()){

ui <- fluidPage(


h2("Below you'll find a red Rectangle with a darkblue stroke"),

fabric_shape(cid = "canvas", shapeId = "shape1", shape = "Rect")

)

server <- function(input, output) {


}


shinyApp(ui = ui, server = server)

}

Add a shape object to a preexisting canvas element

Description

Add a shape object to a preexisting canvas element

Usage

fabric_shape_add(
  cid,
  shapeId,
  shape = "Rect",
  left = "100",
  top = "100",
  fill = "red",
  width = 200,
  height = 200,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 5,
  selectable = TRUE,
  radius = NULL,
  xPolygon = NULL,
  yPolygon = NULL
)
fabric_shape_add(
  cid,
  shapeId,
  shape = "Rect",
  left = "100",
  top = "100",
  fill = "red",
  width = 200,
  height = 200,
  angle = 0,
  opacity = 1,
  strokecolor = "darkblue",
  strokewidth = 5,
  selectable = TRUE,
  radius = NULL,
  xPolygon = NULL,
  yPolygon = NULL
)

Arguments

`cid`	the id of the canvas element you want to add your shape to
`shapeId`	the id of the shape object
`shape`	the shape of the object. Choices include 'Circle', 'Triangle' and 'Rect'. Defaults to 'Rect'
`left`	the shape's position from the left relative to the canvas element. Defaults to 100
`top`	the shape's position from the top relative to the canvas element. Defaults to 100
`fill`	the color of the shape. Defaults to 'red'
`width`	the width of the shape. Defaults to 200
`height`	the height of the shape. Defaults to 200
`angle`	the angle of rotation of the shape. Defaults to 0 (no rotation)
`opacity`	the opacity of the shape. Defaults to 1
`strokecolor`	the stroke color of the shape. Defaults to 'darkblue'
`strokewidth`	the stroke width of the shape. Defaults to 5.
`selectable`	logical. If TRUE, the user can modify interactively the shape. Defaults to TRUE
`radius`	Mandatory if the chosen shape is a 'Circle'. Defaults to NULL
`xPolygon`	a vector of the coordinate points of the polygon, from the left.
`yPolygon`	a vector of the coordinate points of the polygon, from the top

Value

a shape object inside a preexisting canvas element

Examples


if (interactive()) {

ui <- fluidPage(


fabric_shape(cid = "canvas",
             shapeId = "shape1",
             shape = "Rect",
             left = 130,
             top = 200),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapo",
                 shape = "Circle",
                 radius = 30,
                 left = 100,
                 top = 100),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapa",
                 shape = "Circle",
                 radius = 30,
                 left = 200,
                 top = 100),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapox",
                 shape = "Circle",
                 radius = 30,
                 left = 300,
                 top = 100),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapor",
                 shape = "Circle",
                 radius = 30,
                 left = 300,
                 top = 100)

)


server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}
if (interactive()) {

ui <- fluidPage(


fabric_shape(cid = "canvas",
             shapeId = "shape1",
             shape = "Rect",
             left = 130,
             top = 200),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapo",
                 shape = "Circle",
                 radius = 30,
                 left = 100,
                 top = 100),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapa",
                 shape = "Circle",
                 radius = 30,
                 left = 200,
                 top = 100),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapox",
                 shape = "Circle",
                 radius = 30,
                 left = 300,
                 top = 100),

fabric_shape_add(cid = "canvas",
                 shapeId = "shapor",
                 shape = "Circle",
                 radius = 30,
                 left = 300,
                 top = 100)

)


server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}

Insert text within canvas element

Description

Insert text within canvas element

Usage

fabric_text(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  textId,
  text,
  left = 100,
  top = 100,
  fill = "#2F3941",
  angle = 0,
  opacity = 1,
  fontFamily = "Comic Sans",
  fontSize = 40,
  fontStyle = "normal",
  strokecolor = "#282A36",
  strokewidth = 1,
  fontWeight = "normal",
  underline = FALSE,
  linethrough = FALSE,
  overline = FALSE,
  selectable = TRUE,
  shadow = FALSE,
  shadowCol = "#FFFAF0",
  textAlign = "center",
  lineHeight = 1,
  textBackgroundColor = NULL,
  isDrawingMode = FALSE
)
fabric_text(
  cid,
  cwidth = 800,
  cheight = 600,
  cfill = "#FFFFFF",
  textId,
  text,
  left = 100,
  top = 100,
  fill = "#2F3941",
  angle = 0,
  opacity = 1,
  fontFamily = "Comic Sans",
  fontSize = 40,
  fontStyle = "normal",
  strokecolor = "#282A36",
  strokewidth = 1,
  fontWeight = "normal",
  underline = FALSE,
  linethrough = FALSE,
  overline = FALSE,
  selectable = TRUE,
  shadow = FALSE,
  shadowCol = "#FFFAF0",
  textAlign = "center",
  lineHeight = 1,
  textBackgroundColor = NULL,
  isDrawingMode = FALSE
)

Arguments

`cid`	the id of the canvas element
`cwidth`	the width of the canvas element. Defaults to 800
`cheight`	the height of the canvas element. Defaults to 600
`cfill`	the color of the canvas element
`textId`	the id of the text
`text`	the content of the text
`left`	the text's position from the left relative to the canvas element. Defaults to 100
`top`	the text's position from the top relative to the canvas element. Defaults to 100
`fill`	the text's color. Defaults to '#2F3941' (dark shade of cyan-blue)
`angle`	the angle of rotation of the text. Defaults to 0 (no rotation)
`opacity`	text opacity (from 0 to 1). Defaults to 1
`fontFamily`	the font family of the text. Defaults to 'Comic Sans'
`fontSize`	text sizing. Defaults to 40
`fontStyle`	the font style of the text. Either 'normal' or 'italic'
`strokecolor`	the stroke color of the text Defaults to '#282A36' (Very dark grayish blue)
`strokewidth`	the stroke width of the text. Defaults to 1
`fontWeight`	allows the user to make text thicker or thinner. Keywords can be used ('normal', 'bold'), or numbers. Defaults to 'normal'
`underline`	logical. Whether to underline the text or not. Defaults to FALSE
`linethrough`	logical. Whether to insert a line through the text or not. Defaults to FALSE
`overline`	logical. Whether to put a line above the text or not. Defaults to FALSE
`selectable`	logical. If TRUE, the user can modify interactively the image's size, position and rotation. Defaults to TRUE
`shadow`	logical. If TRUE a text shadow will be inserted behind the raw text. Defaults to FALSE
`shadowCol`	the color of the text shadow. Defaults to #FFFAF0 (floral white)
`textAlign`	the alignment of text. Useful when there are line breaks. Defaults to "center"
`lineHeight`	the height of the line breaks.Defaults to 1
`textBackgroundColor`	the background color of the text, defaults to NULL
`isDrawingMode`	logical. If TRUE, the user can draw inside the canvas element.

Value

a text object within a canvas element

Examples



if (interactive()) {


ui <- fluidPage(


fabric_text(cid = "can",
         textId = "text",
         text = "But A Hero Is A Guy Who Gives Out The Meat To Everyone Else.",
         cfill = "#DD5347",
         left = 120,
         shadowCol = "blue",
         fontSize = 20,
         fontWeight = "bold",
         lineHeight = 3
         )
)
server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}
if (interactive()) {


ui <- fluidPage(


fabric_text(cid = "can",
         textId = "text",
         text = "But A Hero Is A Guy Who Gives Out The Meat To Everyone Else.",
         cfill = "#DD5347",
         left = 120,
         shadowCol = "blue",
         fontSize = 20,
         fontWeight = "bold",
         lineHeight = 3
         )
)
server <- function(input, output) {}

shinyApp(ui = ui, server = server)

}

Add text within preexisting canvas element

Description

Add text within preexisting canvas element

Usage

fabric_text_add(
  cid,
  textId,
  text,
  left = 100,
  top = 100,
  fill = "#2F3941",
  angle = 0,
  opacity = 1,
  fontFamily = "Comic Sans",
  fontSize = 40,
  fontStyle = "normal",
  strokecolor = "#282A36",
  strokewidth = 1,
  fontWeight = "normal",
  underline = FALSE,
  linethrough = FALSE,
  overline = FALSE,
  selectable = TRUE,
  shadow = FALSE,
  shadowCol = "#324C63",
  textAlign = "center",
  lineHeight = 1,
  textBackgroundColor = NULL
)
fabric_text_add(
  cid,
  textId,
  text,
  left = 100,
  top = 100,
  fill = "#2F3941",
  angle = 0,
  opacity = 1,
  fontFamily = "Comic Sans",
  fontSize = 40,
  fontStyle = "normal",
  strokecolor = "#282A36",
  strokewidth = 1,
  fontWeight = "normal",
  underline = FALSE,
  linethrough = FALSE,
  overline = FALSE,
  selectable = TRUE,
  shadow = FALSE,
  shadowCol = "#324C63",
  textAlign = "center",
  lineHeight = 1,
  textBackgroundColor = NULL
)

Arguments

`cid`	the id of the canvas element
`textId`	the id of the text
`text`	the content of the text
`left`	the text's position from the left relative to the canvas element. Defaults to 100
`top`	the text's position from the top relative to the canvas element. Defaults to 100
`fill`	the text's color. Defaults to '#2F3941' (dark shade of cyan-blue)
`angle`	the angle of rotation of the text. Defaults to 0 (no rotation)
`opacity`	text opacity (from 0 to 1). Defaults to 1
`fontFamily`	the font family of the text. Defaults to 'Comic Sans'
`fontSize`	text sizing. Defaults to 40
`fontStyle`	the font style of the text. Either 'normal' or 'italic'
`strokecolor`	the stroke color of the text Defaults to '#282A36' (Very dark grayish blue)
`strokewidth`	the stroke width of the text. Defaults to 1
`fontWeight`	allows the user to make text thicker or thinner. Keywords can be used ('normal', 'bold'), or numbers. Defaults to 'normal'
`underline`	logical. Whether to underline the text or not. Defaults to FALSE
`linethrough`	logical. Whether to insert a line through the text or not. Defaults to FALSE
`overline`	logical. Whether to put a line above the text or not. Defaults to FALSE
`selectable`	logical. If TRUE, the user can modify interactively the image's size, position and rotation. Defaults to TRUE
`shadow`	logical. If TRUE a text shadow will be inserted behind the raw text. Defaults to FALSE
`shadowCol`	the color of the text shadow. Defaults to #FFFAF0 (floral white)
`textAlign`	the alignment of text. Useful when there are line breaks. Defaults to "center"
`lineHeight`	the height of the line breaks.Defaults to 1
`textBackgroundColor`	the background color of the text, defaults to NULL

Value

a text object within a preexisting canvas element

Examples


if (interactive()) {

ui <- fluidPage(


fabric_shape(cid = "canvas123",
             cfill = "lightblue",
             cwidth = 1000,
             shapeId = "tri1",
             shape = "Triangle",
             fill = "darkblue"),

fabric_text_add(cid = "canvas123",
                textId = "txt1",
                text = "This is a darkblue Triangle !",
                left = 350
                )

                )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)


}
if (interactive()) {

ui <- fluidPage(


fabric_shape(cid = "canvas123",
             cfill = "lightblue",
             cwidth = 1000,
             shapeId = "tri1",
             shape = "Triangle",
             fill = "darkblue"),

fabric_text_add(cid = "canvas123",
                textId = "txt1",
                text = "This is a darkblue Triangle !",
                left = 350
                )

                )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)


}

Package 'fabricerin'

Help Index

Add a background or an overlay image to a preexisting canvas

Description

Usage

Arguments

Value

Examples

Create a canvas element for drawing

Description

Usage

Arguments

Value

Examples

Insert external images inside canvas element

Description

Usage

Arguments

Value

Examples

Add an image to a preexisting canvas element

Description

Usage

Arguments

Value

Examples

Create shapes inside a canvas

Description

Usage

Arguments

Value

Examples

Add a shape object to a preexisting canvas element

Description

Usage

Arguments

Value

Examples

Insert text within canvas element

Description

Usage

Arguments

Value

Examples

Add text within preexisting canvas element

Description

Usage

Arguments

Value

Examples