Markup Editor Exported Methods And Properties
The functions, properties, and defaults related to markup editing that are exported by the Pintura module.
The markup helper methods make it easier to create and adjust the Markup Editor tools and shape style controls that are available in the annotate and decorate plugings.
Export | Description |
---|---|
markup_editor_defaults |
An object containing default tools and shape styles. |
markup_editor_locale_en_gb |
The English language configuration object for the Markup Editor. Required when manipulating shapes in Annotate and/or Decorate plugins. |
createMarkupEditorToolbar(tools) |
A function that creates the default Markup Editor toolbar object. |
createMarkupEditorToolStyles(styles) |
A function that creates the default Markup Editor tool styles object. |
createMarkupEditorToolStyle(type, shape) |
A function that creates a new tool style object. |
createMarkupEditorShapeStyleControls(controls) |
A function that creates a new shape style control configuration object. |
shapeGetLevel |
A shape preprocessing helper function, pass in a shape and the current preprocessor options and it'll return the flipX , flipY , and rotation values to keep the shape level.
|
shapeGetLength |
Pass in a line shape to get the line length. |
shapeGetCenter |
Pass in a shape to get the shape center position. |
Helper methods to create style controls, these return a style control with the supplied options.
Export | Description |
---|---|
createMarkupEditorBackgroundColorControl(colorOptions) |
Helper method to create the default background color control configuration. |
createMarkupEditorStrokeColorControl(colorOptions) |
Helper method to create the default stroke color control configuration. |
createMarkupEditorStrokeWidthControl(sizeOptions) |
Helper method to create the default stroke width control configuration. |
createMarkupEditorLineStartStyleControl(styleOptions) |
Helper method to create the default line start control configuration. |
createMarkupEditorLineEndStyleControl(options) |
Helper method to create the default line end control configuration. |
createMarkupEditorFontColorControl(options) |
Helper method to create the default font color control configuration. |
createMarkupEditorFontFamilyControl(options) |
Helper method to create the default font family control configuration. This control will automatically test if the defined fonts are available, if not, they will be automatically hidden. |
createMarkupEditorFontStyleControl(options) |
Helper method to create the default font style control configuration. |
createMarkupEditorFontSizeControl(options) |
Helper method to create the default font size control configuration. |
createMarkupEditorTextAlignControl(options) |
Helper method to create the default text align control configuration. |
Helper methods to transform readable option objects and arrays into options that can be consumed by shape controls.
Export | Description |
---|---|
createMarkupEditorColorOptions(options) |
Helper method to create the default color options array. |
createMarkupEditorFontSizeOptions(options) |
Helper method to create the default font size options array. |
createMarkupEditorFontScaleOptions(options) |
Helper method to create the default font scale options array. |
createMarkupEditorStrokeWidthOptions(options) |
Helper method to create the default stroke width options array. |
createMarkupEditorStrokeScaleOptions(options) |
Helper method to create the default stroke scale options array. |
createMarkupEditorFontFamilyOptions(options) |
Helper method to create the default font family options array. |
createMarkupEditorFontStyleOptions(options) |
Helper method to create the default font style options array. |
createMarkupEditorLineEndStyleOptions(options) |
Helper method to create the default line end style options array. |
Create default sets of markup options.
Export | Description |
---|---|
createDefaultColorOptions() |
Returns the default color options array. |
createDefaultFontSizeOptions() |
Returns the default font size options array. |
createDefaultFontScaleOptions() |
Returns the default font scale options array. |
createDefaultStrokeWidthOptions() |
Returns the default stroke width options array. |
createDefaultStrokeScaleOptions() |
Returns the default stroke scale options array. |
createDefaultLineEndStyleOptions() |
Returns the default line end style options array. |
createDefaultFontFamilyOptions() |
Returns the default font family options array. |
createDefaultFontStyleOptions() |
Returns the default font style options array. |
createDefaultTextAlignOptions() |
Returns the default text align options array. |
markup_editor_defaults
This object contains the default markup editor settings.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendEditor,
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
createDefaultShapePreprocessor,
setPlugins,
plugin_annotate,
plugin_crop,
markup_editor_defaults,
locale_en_gb,
markup_editor_locale_en_gb,
plugin_annotate_locale_en_gb,
plugin_crop_locale_en_gb,
} from './pintura.js';
setPlugins(plugin_crop, plugin_annotate);
const editor = appendEditor('#editor', {
imageReader: createDefaultImageReader(),
imageWriter: createDefaultImageWriter(),
imageOrienter: createDefaultImageOrienter(),
shapePreprocessor: createDefaultShapePreprocessor(),
...markup_editor_defaults,
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
src: 'image.jpeg',
});
</script>
import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
createDefaultShapePreprocessor,
setPlugins,
plugin_annotate,
plugin_crop,
markup_editor_defaults,
locale_en_gb,
markup_editor_locale_en_gb,
plugin_annotate_locale_en_gb,
plugin_crop_locale_en_gb,
} from '@pqina/pintura';
setPlugins(plugin_crop, plugin_annotate);
const editorDefaults = {
imageReader: createDefaultImageReader(),
imageWriter: createDefaultImageWriter(),
imageOrienter: createDefaultImageOrienter(),
shapePreprocessor: createDefaultShapePreprocessor(),
...markup_editor_defaults,
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
};
function App() {
return (
<div className="App">
<PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
createDefaultShapePreprocessor,
setPlugins,
plugin_annotate,
plugin_crop,
markup_editor_defaults,
locale_en_gb,
markup_editor_locale_en_gb,
plugin_annotate_locale_en_gb,
plugin_crop_locale_en_gb,
} from '@pqina/pintura';
setPlugins(plugin_crop, plugin_annotate);
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: {
imageReader: createDefaultImageReader(),
imageWriter: createDefaultImageWriter(),
imageOrienter: createDefaultImageOrienter(),
shapePreprocessor: createDefaultShapePreprocessor(),
...markup_editor_defaults,
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
},
};
},
methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
createDefaultShapePreprocessor,
setPlugins,
plugin_annotate,
plugin_crop,
markup_editor_defaults,
locale_en_gb,
markup_editor_locale_en_gb,
plugin_annotate_locale_en_gb,
plugin_crop_locale_en_gb,
} from '@pqina/pintura';
import 'pintura/pintura.css';
setPlugins(plugin_crop, plugin_annotate);
let editorDefaults = {
imageReader: createDefaultImageReader(),
imageWriter: createDefaultImageWriter(),
imageOrienter: createDefaultImageOrienter(),
shapePreprocessor: createDefaultShapePreprocessor(),
...markup_editor_defaults,
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
};
</script>
<div>
<PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import {
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
createDefaultShapePreprocessor,
setPlugins,
plugin_annotate,
plugin_crop,
markup_editor_defaults,
locale_en_gb,
markup_editor_locale_en_gb,
plugin_annotate_locale_en_gb,
plugin_crop_locale_en_gb,
} from '@pqina/pintura';
setPlugins(plugin_crop, plugin_annotate);
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = {
imageReader: createDefaultImageReader(),
imageWriter: createDefaultImageWriter(),
imageOrienter: createDefaultImageOrienter(),
shapePreprocessor: createDefaultShapePreprocessor(),
...markup_editor_defaults,
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
};
}
<pintura-editor [options]="editorDefaults" src="image.jpeg"></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
$(function () {
var {
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
createDefaultShapePreprocessor,
setPlugins,
plugin_annotate,
plugin_crop,
markup_editor_defaults,
locale_en_gb,
markup_editor_locale_en_gb,
plugin_annotate_locale_en_gb,
plugin_crop_locale_en_gb,
} = $.fn.pintura;
setPlugins(plugin_crop, plugin_annotate);
var editor = $('#editor').pintura({
imageReader: createDefaultImageReader(),
imageWriter: createDefaultImageWriter(),
imageOrienter: createDefaultImageOrienter(),
shapePreprocessor: createDefaultShapePreprocessor(),
...markup_editor_defaults,
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
src: 'image.jpeg',
});
});
</script>
createMarkupEditorToolbar
This is a helper function to create the Markup Editor toolbar. If no parameters are passed the function creates the default Markup Editor toolbar array.
We can assign the return value of this function to the markupEditorToolbar
property to update the toolbar.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendDefaultEditor,
createMarkupEditorToolbar,
} from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
markupEditorToolbar: createMarkupEditorToolbar(),
});
</script>
import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolbar={createMarkupEditorToolbar()}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:markupEditorToolbar="markupEditorToolbar"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
markupEditorToolbar: createMarkupEditorToolbar(),
};
},
methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
getEditorDefaults,
createMarkupEditorToolbar,
} from '@pqina/pintura';
import 'pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolbar={createMarkupEditorToolbar()}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
markupEditorToolbar: any = createMarkupEditorToolbar();
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[markupEditorToolbar]="markupEditorToolbar"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
$(function () {
var { createMarkupEditorToolbar } = $.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
markupEditorToolbar: createMarkupEditorToolbar(),
});
});
</script>
To create a custom toolbar we can either pass an array of strings or an array of arrays.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendDefaultEditor,
createMarkupEditorToolbar,
} from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
markupEditorToolbar: createMarkupEditorToolbar([
'eraser',
'sharpie',
'rectangle',
]),
});
</script>
import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolbar={createMarkupEditorToolbar([
'eraser',
'sharpie',
'rectangle',
])}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:markupEditorToolbar="markupEditorToolbar"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
markupEditorToolbar: createMarkupEditorToolbar([
'eraser',
'sharpie',
'rectangle',
]),
};
},
methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
getEditorDefaults,
createMarkupEditorToolbar,
} from '@pqina/pintura';
import 'pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolbar={createMarkupEditorToolbar([
'eraser',
'sharpie',
'rectangle',
])}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
markupEditorToolbar: any = createMarkupEditorToolbar([
'eraser',
'sharpie',
'rectangle',
]);
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[markupEditorToolbar]="markupEditorToolbar"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
$(function () {
var { createMarkupEditorToolbar } = $.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
markupEditorToolbar: createMarkupEditorToolbar([
'eraser',
'sharpie',
'rectangle',
]),
});
});
</script>
Each tool key ('eraser'
, 'sharpie'
, 'rectangle'
) links to a label and icon in the markup locale file. It also links to a shape style for that key, this style is defined in the markupEditorToolStyles
property.
To find the label and optional icon the first character of the tool key is automatically uppercased and then the key is appended to shapeLabelTool
to get the label, and shapeIconTool
to get the icon.
'sharpie' -> 'Sharpie' -> locale.shapeLabelToolSharpie
'sharpie' -> 'Sharpie' -> locale.shapeIconToolSharpie
We can also pass an array instead of a string. In this case the first index of the array should be the tool key.
The array can be either two or three items in length.
// The label for key 'sharpie' should be available in the locale object
createMarkupEditorToolbar([['sharpie', { disabled: true }]]);
// The label 'Pen' is used
createMarkupEditorToolbar([['sharpie', 'Pen']]);
// The label 'Pen' is used and the tool is disabled
createMarkupEditorToolbar([['sharpie', 'Pen', { disabled: true }]]);
The example below will define three tools and disable the eraser tool.
createMarkupEditorToolbar([
['eraser', { disabled: true }],
'sharpie',
'rectangle',
]);
In the example below we add a custom 'marker'
tool. It'll use the label 'Marker'
and the icon defined in the icon
property. The style of the tool will be defined with key 'marker'
.
createMarkupEditorToolbar([
['eraser', { disabled: true }],
'sharpie',
['marker', 'Marker', { icon: '<g></g>' }]
'rectangle',
]);
createMarkupEditorToolStyles
Running this helper function without parameters will return the default tool styles.
We can assign the return value of this function to the markupEditorToolStyles
to update the tool default styles.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendDefaultEditor,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
} from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
markupEditorToolStyles: createMarkupEditorToolStyles(),
});
</script>
import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
getEditorDefaults,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolStyles={createMarkupEditorToolStyles()}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:markupEditorToolStyles="markupEditorToolStyles"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
getEditorDefaults,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
} from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
markupEditorToolStyles: createMarkupEditorToolStyles(),
};
},
methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
getEditorDefaults,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
} from '@pqina/pintura';
import 'pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolStyles={createMarkupEditorToolStyles()}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import {
getEditorDefaults,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
} from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
markupEditorToolStyles: any = createMarkupEditorToolStyles();
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[markupEditorToolStyles]="markupEditorToolStyles"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
$(function () {
var { createMarkupEditorToolStyle, createMarkupEditorToolStyles } =
$.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
markupEditorToolStyles: createMarkupEditorToolStyles(),
});
});
</script>
We can add custom styles by passing a configuration object to the function, use the createMarkupEditorToolStyle
function to create a custom style object.
The createMarkupEditorToolStyles
function will merge the passed configuration object with the default tool styles. This allows adding tool styles or altering existing tool styles.
Let's take a look at the createMarkupEditorToolStyle
function to see how we can assign a custom style.
createMarkupEditorToolStyle
The createMarkupEditorToolStyle
function expects three parameters, the type of the shape, the shape properties that should be assigned and the shape options. The return value should be set to a tool key in the markupEditorToolStyles
object.
Type can be either 'path'
, 'rectangle'
, 'ellipse'
, 'line'
, or 'text'
. The function will return a set of default styles.
Below we create a custom "marker" tool and style. We use the disableStyle
property to prevent adjusting the strokeWidth
and strokeColor
. We also use the createDefaultColorOptions
function to set the default yellow color to the strokeColor
of the shape.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendDefaultEditor,
createDefaultColorOptions,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
createMarkupEditorToolbar,
} from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
markupEditorToolStyles: createMarkupEditorToolStyles({
// key, style
marker: createMarkupEditorToolStyle('path', {
strokeWidth: '5%',
strokeColor: createDefaultColorOptions().yellow,
disableStyle: ['strokeWidth'],
}),
}),
markupEditorToolbar: createMarkupEditorToolbar([
'eraser',
'sharpie',
// key, label
['marker', 'Marker'],
'rectangle',
'ellipse',
'arrow',
'text',
]),
});
</script>
import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
getEditorDefaults,
createDefaultColorOptions,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
createMarkupEditorToolbar,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolStyles={createMarkupEditorToolStyles({
// key, style
marker: createMarkupEditorToolStyle('path', {
strokeWidth: '5%',
strokeColor: createDefaultColorOptions().yellow,
disableStyle: ['strokeWidth'],
}),
})}
markupEditorToolbar={createMarkupEditorToolbar([
'eraser',
'sharpie',
// key, label
['marker', 'Marker'],
'rectangle',
'ellipse',
'arrow',
'text',
])}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:markupEditorToolStyles="markupEditorToolStyles"
:markupEditorToolbar="markupEditorToolbar"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
getEditorDefaults,
createDefaultColorOptions,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
createMarkupEditorToolbar,
} from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
markupEditorToolStyles: createMarkupEditorToolStyles({
// key, style
marker: createMarkupEditorToolStyle('path', {
strokeWidth: '5%',
strokeColor: createDefaultColorOptions().yellow,
disableStyle: ['strokeWidth'],
}),
}),
markupEditorToolbar: createMarkupEditorToolbar([
'eraser',
'sharpie',
// key, label
['marker', 'Marker'],
'rectangle',
'ellipse',
'arrow',
'text',
]),
};
},
methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
getEditorDefaults,
createDefaultColorOptions,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
createMarkupEditorToolbar,
} from '@pqina/pintura';
import 'pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorToolStyles={createMarkupEditorToolStyles({
// key, style
marker: createMarkupEditorToolStyle('path', {
strokeWidth: '5%',
strokeColor: createDefaultColorOptions().yellow,
disableStyle: ['strokeWidth'],
}),
})}
markupEditorToolbar={createMarkupEditorToolbar([
'eraser',
'sharpie',
// key, label
['marker', 'Marker'],
'rectangle',
'ellipse',
'arrow',
'text',
])}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import {
getEditorDefaults,
createDefaultColorOptions,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
createMarkupEditorToolbar,
} from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
markupEditorToolStyles: any = createMarkupEditorToolStyles({
// key, style
marker: createMarkupEditorToolStyle('path', {
strokeWidth: '5%',
strokeColor: createDefaultColorOptions().yellow,
disableStyle: ['strokeWidth'],
}),
});
markupEditorToolbar: any = createMarkupEditorToolbar([
'eraser',
'sharpie',
// key, label
['marker', 'Marker'],
'rectangle',
'ellipse',
'arrow',
'text',
]);
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[markupEditorToolStyles]="markupEditorToolStyles"
[markupEditorToolbar]="markupEditorToolbar"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
$(function () {
var {
createDefaultColorOptions,
createMarkupEditorToolStyle,
createMarkupEditorToolStyles,
createMarkupEditorToolbar,
} = $.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
markupEditorToolStyles: createMarkupEditorToolStyles({
// key, style
marker: createMarkupEditorToolStyle('path', {
strokeWidth: '5%',
strokeColor: createDefaultColorOptions().yellow,
disableStyle: ['strokeWidth'],
}),
}),
markupEditorToolbar: createMarkupEditorToolbar([
'eraser',
'sharpie',
// key, label
['marker', 'Marker'],
'rectangle',
'ellipse',
'arrow',
'text',
]),
});
});
</script>
createMarkupEditorShapeStyleControls
The createMarkupEditorShapeStyleControls
function creates the default set of shape style controls which can be assigned to the markupEditorShapeStyleControls
property.
We can use this method to override default style options. Set a style property to false
to disable it or set a property to a list of options to override the default options.
This will disable the fontFamily
dropdown.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendDefaultEditor,
createMarkupEditorShapeStyleControls,
} from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
markupEditorShapeStyleControls: createMarkupEditorShapeStyleControls({
fontFamilyOptions: false,
}),
});
</script>
import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls(
{
fontFamilyOptions: false,
}
)}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:markupEditorShapeStyleControls="markupEditorShapeStyleControls"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
markupEditorShapeStyleControls:
createMarkupEditorShapeStyleControls({
fontFamilyOptions: false,
}),
};
},
methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
import 'pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls({
fontFamilyOptions: false,
})}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
markupEditorShapeStyleControls: any = createMarkupEditorShapeStyleControls({
fontFamilyOptions: false,
});
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[markupEditorShapeStyleControls]="markupEditorShapeStyleControls"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
$(function () {
var { createMarkupEditorShapeStyleControls } = $.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
markupEditorShapeStyleControls:
createMarkupEditorShapeStyleControls({
fontFamilyOptions: false,
}),
});
});
</script>
This will change the default fontFamily
dropdown options.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendDefaultEditor,
createMarkupEditorShapeStyleControls,
} from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
markupEditorShapeStyleControls: createMarkupEditorShapeStyleControls({
fontFamilyOptions: [
['arial', 'Arial'],
['open-sans', 'Open Sans'],
['courier', 'Courier'],
// Define additional custom fonts here
],
}),
});
</script>
import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls(
{
fontFamilyOptions: [
['arial', 'Arial'],
['open-sans', 'Open Sans'],
['courier', 'Courier'],
// Define additional custom fonts here
],
}
)}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:markupEditorShapeStyleControls="markupEditorShapeStyleControls"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
markupEditorShapeStyleControls:
createMarkupEditorShapeStyleControls({
fontFamilyOptions: [
['arial', 'Arial'],
['open-sans', 'Open Sans'],
['courier', 'Courier'],
// Define additional custom fonts here
],
}),
};
},
methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
import 'pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls({
fontFamilyOptions: [
['arial', 'Arial'],
['open-sans', 'Open Sans'],
['courier', 'Courier'],
// Define additional custom fonts here
],
})}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import {
getEditorDefaults,
createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
markupEditorShapeStyleControls: any = createMarkupEditorShapeStyleControls({
fontFamilyOptions: [
['arial', 'Arial'],
['open-sans', 'Open Sans'],
['courier', 'Courier'],
// Define additional custom fonts here
],
});
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[markupEditorShapeStyleControls]="markupEditorShapeStyleControls"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
$(function () {
var { createMarkupEditorShapeStyleControls } = $.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
markupEditorShapeStyleControls:
createMarkupEditorShapeStyleControls({
fontFamilyOptions: [
['arial', 'Arial'],
['open-sans', 'Open Sans'],
['courier', 'Courier'],
// Define additional custom fonts here
],
}),
});
});
</script>
Markup option defaults
createDefaultColorOptions
Returns the following object of default color options.
// an object containing default color presets
{
transparent: [1, 1, 1, 0],
white: [1, 1, 1],
silver: [0.8667, 0.8667, 0.8667],
gray: [0.6667, 0.6667, 0.6667],
black: [0, 0, 0],
navy: [0, 0.1216, 0.2471],
blue: [0, 0.4549, 0.851],
aqua: [0.498, 0.8588, 1],
teal: [0.2235, 0.8, 0.8],
olive: [0.2392, 0.6, 0.4392],
green: [0.1804, 0.8, 0.251],
yellow: [1, 0.8627, 0],
orange: [1, 0.5216, 0.1059],
red: [1, 0.2549, 0.2118],
maroon: [0.5216, 0.0784, 0.2941],
fuchsia: [0.9412, 0.0706, 0.7451],
purple: [0.6941, 0.051, 0.7882],
}
createDefaultFontSizeOptions
Returns the following array of fixed font sizes.
// An array of absolute font sizes
[16, 18, 20, 24, 30, 36, 48, 64, 72, 96, 144];
createDefaultFontScaleOptions
Returns the following object containing a selection of relative font sizes.
// An object describing relative sizes
{
extraSmall: '2%',
small: '4%',
mediumSmall: '8%',
medium: '10%',
mediumLarge: '15%',
large: '20%',
extraLarge: '25%',
}
createDefaultLineScaleOptions
Returns the following object containing a selection of relative line heights.
// An object describing relative sizes
{
extraSmall: '40%',
small: '60%',
mediumSmall: '100%',
medium: '120%',
mediumLarge: '140%',
large: '180%',
extraLarge: '220%',
}
createDefaultLineHeightOptions
Returns the following object containing a selection of absolute line heights.
// An array of line heights
[16, 18, 20, 24, 30, 36, 48, 64, 72, 96, 128, 144];
createDefaultStrokeScaleOptions
Returns the following object containing a selection of relative stroke widths.
// An object describing relative sizes
{
extraSmall: '0.25%',
small: '0.5%',
mediumSmall: '1%',
medium: '1.75%',
mediumLarge: '2.5%',
large: '3.5%',
extraLarge: '5%',
}
createDefaultStrokeWidthOptions
Returns the following array of fixed stroke widths.
// An array of fixed stroke widths
[1, 2, 3, 4, 6, 8, 12, 16, 20, 24, 32, 48];
createDefaultLineEndStyleOptions
Returns the following array of line end styles.
// An array of line end styles
[
'bar',
'arrow',
'arrowSolid',
'circle',
'circleSolid',
'square',
'squareSolid',
];
createDefaultFontFamilyOptions
Returns the following array of font families. The font family control automatically tests if a font family is available on the user device, if not, it will hide the option.
// An array of font family stacks
[
[`Helvetica, Arial, Verdana, 'Droid Sans', sans-serif`, 'Sans Serif'],
[`'Arial Black', 'Avenir-Black', 'Arial Bold'`, 'Black'],
[`'Arial Narrow', 'Futura-CondensedMedium'`, 'Narrow'],
[`'Trebuchet MS'`, 'Humanist'],
[
`Georgia, 'Avenir-Black', 'Times New Roman', 'Droid Serif', serif`,
'Serif',
],
[`Palatino`, 'Old-Style'],
[`'Times New Roman', 'TimesNewRomanPSMT'`, 'Transitional'],
[`Menlo, Monaco, 'Lucida Console', monospace`, 'Monospaced'],
[`'Courier New', monospace`, 'Slab Serif'],
];
createDefaultFontStyleOptions
Returns the following array of font styles. These are applied to the fontStyle
and fontWeight
shape properties.
// An array of font styles
[
['normal', 'bold'],
['italic', 'normal'],
['italic', 'bold'],
];
createDefaultTextAlignOptions
Returns the following array.
// An array of text alignment options
['left', 'center', 'right'];