Skip to content

Latest commit

 

History

History
244 lines (200 loc) · 13.3 KB

README.md

File metadata and controls

244 lines (200 loc) · 13.3 KB
Raw

vue-drawing-canvas

VueJS Component for drawing on canvas.

Support for both Vue 3 and Vue 2 + Composition API



Demo

Vue 3

Vue 3 Drawing Canvas Demo

Vue 2

Deployed on a nuxt container which have access to terminal


vue-drawing-canvas

Note: If you're using nuxt.js and receive error Object(...) is not a function please refer to this issue



Table of Contents



Installation

Install using package manager:

npm install --save-dev vue-drawing-canvas

# or with Vue 2

npm install --save-dev vue-drawing-canvas @vue/composition-api

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <vue-drawing-canvas ref="VueCanvasDrawing" />
</template>

<script>
  import VueDrawingCanvas from "vue-drawing-canvas";

  export default {
    name: "MyComponent",
    components: {
      VueDrawingCanvas,
    },
  };
</script>



Usage

Props


Name Type Default Value Description
canvasId String VueDrawingCanvas Specifies your canvas id
width String, Number 600 Specifies canvas width
height String, Number 400 Specifies canvas height
image String Your v-model to get canvas output to an base64 image
strokeType String "dash" Specifies stroke type to draw on canvas.

Accepted value "dash", "line", "circle", "square", "triangle", "half_triangle"
fillShape Boolean false Specifies if the shape must be filled with the current fill style
eraser Boolean false Props to change state from drawing to erasing
color String "#000000" Specifies the color, gradient, or pattern to use for the strokes
lineWidth Number 5 Sets the thickness of line
lineCap String "round" Determines the shape used to draw the end points of line.

Accepted value "round", "square", "butt".
Refer to this site for more information.
lineJoin String "miter" determines the shape used to join two line segments where they meet.

Accepted value "round", "miter", "square".
Refer to this site for more information.
lock Boolean false Lock canvas for drawing
backgroundColor String "#FFFFFF" Set background color on your canvas
backgroundImage String Set background image on your canvas

Be carefull for performance issue when using this props !!
initialImage Array [] Draw strokes and shapes from canvas you've worked before. Demo
additionalImages Array [] Accept Array of watermark Object to draw either text or insert multiple image on canvas

Be carefull for performance issue when using this props !!
classes Array, String, Object Specifies your own classes to canvas
styles Array, String, Object Specifies your own styles to canvas
watermark Object Put watermark text/image on your image output

(see details in the next section below)
saveAs String "png" Specifies output type. This props accept either "png" or "jpeg"
outputWidth Number this.width Specifies image output width, if undefined then canvas width will be used
outputHeight Number this.height Specifies image output height, if undefined then canvas height will be used

Watermark Object


{
  // Specifies your watermark type. Type can be either "Text" or "Image"
  //
  // type: String
  // required: true
  // validator: (value) => { return ["Text", "Image"].includes(value) }
  type: "Text",
  // Specifies your watermark source
  // If type is "Text" enter your watermark text here
  // if type if "Image" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file
  //
  // type: String
  // required: true
  source: "Watermark",
  // The x-axis coordinate of the point at which to begin drawing the watermark,
  // in pixels
  //
  // type: Number
  // required: true
  x: 200,
  // The y-axis coordinate of the point at which to begin drawing the watermark,
  // in pixels
  //
  // type: Number
  // required: true
  y: 180,
  // Specifies width and height for your watermark image
  //
  // type: Object
  // required: false
  imageStyle: {
    // The width to draw the image in the canvas
    //
    // type: Number
    // required: false
    // default: () => this.width
    width: 600,
    // The height to draw the image in the canvas
    //
    // type: Number
    // required: false
    // default: () => this.height
    height: 400
  },
  // Specifies text style for your watermark
  //
  // type: Object
  // required: false
  fontStyle: {
    // The maximum number of pixels wide the text may be once rendered.
    // If not specified, there is no limit to the width of the text.
    //
    // type: Number
    // required: false
    width: 200,
    // Sets the height of text in pixels. Usually this value has same value with font
    //
    // type: Number
    // required: false
    // default: () => 20
    lineHeight: 48,
    // Specifies the color, gradient, or pattern to use for the text
    //
    // type: String
    // required: false
    // default: () => '#000000'
    color: '#FF0000',
    // Specifies the current text style to use when drawing text.
    // font: '{fontWeight} {fontSize} {fontFamily}'
    //
    // type: String
    // required: false
    // default: () => '20px serif'
    font: 'bold 48px serif',
    // Specifies drawing type to use when drawing text.
    //
    // type: String
    // required: false
    // validator: (value) => { return ["fill", "stroke"].includes(value) }
    // default: () => 'fill'
    drawType: 'fill',
    // Specifies the current text alignment used when drawing text
    // The alignment is relative to the x value
    //
    // type: String
    // required: false
    // validator: (value) => { return ["left", "right", "center", "start", "end"].includes(value) }
    // default: () => 'start'
    textAlign: 'left',
    // Specifies the current text baseline used when drawing text
    //
    // type: String
    // required: false
    // validator: (value) => { return ["top", "hanging", "middle", "alphabetic", "ideographic", "bottom"].includes(value) }
    // default: () => 'alphabetic'
    textBaseline: 'top',
    // The rotation angle, clockwise in radians
    //
    // type: Number
    // required: false
    rotate: 45
  }
}



Methods


Method Name Return Value Description
getCoordinates(event) { x: 0, y: 0 } Get x-axis and y-axis coordinates from current canvas
reset() Reset current canvas to new state
undo() Remove last drawing stroke on current canvas
redo() Re-draw last removed stroke on current canvas
redraw() Redraw all strokes on current canvas
isEmpty() true or false Get current canvas empty state
getAllStrokes() Array of strokes and shapes Get all strokes and shapes from canvas



Changelog

Read here



License

MIT