| title | page_title | res_type |
|---|---|---|
Surface |
API reference for Kendo UI Drawing API Surface |
api |
An abstract class representing the top-level drawing surface. This class can't be instantiated directly.
Specific implementations are created via the static create method.
The implementations for SVG and Canvas inherit from this base class.
<div id="container" style="position: relative; width: 600px; height: 400px;"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"));
var path = new draw.Path().fill("red")
.moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();
surface.draw(path);
</script>
Creates a drawing surface matching the browser capabilities.
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
type: "canvas",
width: "600px",
height: "400px"
});
var path = new draw.Path().fill("red")
.moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();
surface.draw(path);
</script>
The DOM (or jQuery) element that will host the surface.
The options to pass to the surface.
kendo.drawing.Surface An implementation matching the browser capabilities or caller preference; undefined if none is available.
The preferred type of surface to create. Supported types (case insensitive):
svgcanvas
This option will be ignored if not supported by the browser. See Supported Browsers.
The height of the surface element. By default the surface will expand to fill the height of the first positioned container.
The width of the surface element. By default the surface will expand to fill the width of the first positioned container.
Specifies general options for the shapes tooltip.
Configures the opening and closing animations of the tooltip. Setting the animation option to false will disable the opening and closing animations. As a result the tooltip will open and close instantly.
animation:true is not a valid configuration.
The animation played when the tooltip is closed.
The effect(s) to use when playing the close animation. Multiple effects should be separated with a space.
Complete list of available animations
The duration of the close animation in milliseconds.
The animation played when the tooltip is opened.
The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.
Complete list of available animations
The duration of the open animation in milliseconds.
Which element the tooltip will be appended to.
Clears the drawing surface.
Draws the element and its children on the surface. Existing elements will remain visible.
The element to draw.
Returns the target drawing element of a DOM event.
The original DOM or jQuery event object.
kendo.drawing.Element The target drawing element, if any.
Hides the surface tooltip.
Resizes the surface to match the size of the container.
Whether to proceed with resizing even if the container dimensions have not changed.
Shows the surface tooltip for the passed shape.
The element for which the tooltip should be shown.
Options for the tooltip.
Triggered when an element has been clicked.
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
click: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Click");
}
});
var path = new draw.Path().fill("red")
.moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();
surface.draw(path);
</script>
The clicked element.
The browser event that triggered the click.
Triggered when the mouse is moved over an element.
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
mouseenter: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Mouse enter");
}
});
var path = new draw.Path().fill("red")
.moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();
surface.draw(path);
</script>
The target element.
The browser event that triggered the click.
Triggered when the mouse is leaves an element.
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
mouseleave: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Mouse leave");
}
});
var path = new draw.Path().fill("red")
.moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();
surface.draw(path);
</script>
The target element.
The browser event that triggered the click.
Triggered when closing the surface tooltip.
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
tooltipClose: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("tooltip close");
}
});
var path = new draw.Path({
tooltip: {
content: "Path"
}
}).fill("red")
.moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();
surface.draw(path);
</script>
The element with set tooltip options. Can differ from the target element for groups.
If invoked, prevents the close action.
The target element.
Triggered when opening the surface tooltip.
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
tooltipOpen: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("tooltip open");
}
});
var path = new draw.Path({
tooltip: {
content: "Path"
}
}).fill("red")
.moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();
surface.draw(path);
</script>
The element with set tooltip options. Can differ from the target element for groups.
If invoked, prevents the open action.
The target element.