diff --git a/HISTORY.md b/HISTORY.md index 7d77917e..786e299e 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -26,6 +26,8 @@ http://visjs.org - Added parentCentralization option for hierarchical layout. - Fixed #1575: fixed selection events - Fixed #1677: updating groups through manipulation now works as it should. +- Fixed #1672: Implemented stepped scaling for nice interpolation of images. +- Added interpolation option for interpolation of images, default true. ## 2016-02-04, version 4.14.0 diff --git a/dist/vis.js b/dist/vis.js index 4172875f..7f1769af 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -25592,14 +25592,14 @@ return /******/ (function(modules) { // webpackBootstrap left: { range: { min: undefined, max: undefined }, format: function format(value) { - return '' + Number.parseFloat(value.toPrecision(3)); + return '' + parseFloat(value.toPrecision(3)); }, title: { text: undefined, style: undefined } }, right: { range: { min: undefined, max: undefined }, format: function format(value) { - return '' + Number.parseFloat(value.toPrecision(3)); + return '' + parseFloat(value.toPrecision(3)); }, title: { text: undefined, style: undefined } } @@ -28552,6 +28552,7 @@ return /******/ (function(modules) { // webpackBootstrap shapeProperties: { borderDashes: false, // only for borders borderRadius: 6, // only for box shape + interpolation: true, // only for image and circularImage shapes useImageSize: false, // only for image and circularImage shapes useBorderWithImage: false // only for image shape }, @@ -30221,8 +30222,35 @@ return /******/ (function(modules) { // webpackBootstrap // draw shadow if enabled this.enableShadow(ctx); - // draw image - ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); + var factor = this.imageObj.width / this.width / this.body.view.scale; + if (factor > 2 && this.options.shapeProperties.interpolation === true) { + var w = this.imageObj.width; + var h = this.imageObj.height; + var can2 = document.createElement('canvas'); + can2.width = w; + can2.height = w; + var ctx2 = can2.getContext('2d'); + + factor *= 0.5; + w *= 0.5; + h *= 0.5; + ctx2.drawImage(this.imageObj, 0, 0, w, h); + + var distance = 0; + var iterations = 1; + while (factor > 2 && iterations < 4) { + ctx2.drawImage(can2, distance, 0, w, h, distance + w, 0, w / 2, h / 2); + distance += w; + factor *= 0.5; + w *= 0.5; + h *= 0.5; + iterations += 1; + } + ctx.drawImage(can2, distance, 0, w, h, this.left, this.top, this.width, this.height); + } else { + // draw image + ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); + } // disable shadows for other elements. this.disableShadow(ctx); @@ -42941,6 +42969,7 @@ return /******/ (function(modules) { // webpackBootstrap shapeProperties: { borderDashes: { boolean: boolean, array: array }, borderRadius: { number: number }, + interpolation: { boolean: boolean }, useImageSize: { boolean: boolean }, useBorderWithImage: { boolean: boolean }, __type__: { object: object } @@ -43081,6 +43110,7 @@ return /******/ (function(modules) { // webpackBootstrap shapeProperties: { borderDashes: false, borderRadius: [6, 0, 20, 1], + interpolation: true, useImageSize: false }, size: [25, 0, 200, 1] diff --git a/docs/network/nodes.html b/docs/network/nodes.html index 146a2233..c2ee7d39 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -180,6 +180,7 @@ var options = { shapeProperties: { borderDashes: false, // only for borders borderRadius: 6, // only for box shape + interpolation: false, // only for image and circularImage shapes useImageSize: false, // only for image and circularImage shapes useBorderWithImage: false // only for image shape } @@ -645,6 +646,13 @@ mySize = minSize + diff * scale; This property is used only for the box shape. It allows you to determine the roundness of the corners of the shape. + + shapeProperties.interpolation + Boolean + true + This property only applies to the image and circularImage shapes. When true, the image is resampled when scaled down, resulting in a nicer image at the cost of computional time. + + shapeProperties.useImageSize Boolean diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index f7f6d650..475092fc 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -96,6 +96,7 @@ class NodesHandler { shapeProperties: { borderDashes: false, // only for borders borderRadius: 6, // only for box shape + interpolation: true, // only for image and circularImage shapes useImageSize: false, // only for image and circularImage shapes useBorderWithImage: false // only for image shape }, diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js index ab0cf97f..0bf68a82 100644 --- a/lib/network/modules/components/nodes/util/CircleImageBase.js +++ b/lib/network/modules/components/nodes/util/CircleImageBase.js @@ -103,8 +103,37 @@ class CircleImageBase extends NodeBase { // draw shadow if enabled this.enableShadow(ctx); - // draw image - ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); + let factor = (this.imageObj.width / this.width) / this.body.view.scale; + if (factor > 2 && this.options.shapeProperties.interpolation === true) { + let w = this.imageObj.width; + let h = this.imageObj.height; + var can2 = document.createElement('canvas'); + can2.width = w; + can2.height = w; + var ctx2 = can2.getContext('2d'); + + factor *= 0.5; + w *= 0.5; + h *= 0.5; + ctx2.drawImage(this.imageObj, 0, 0, w, h); + + let distance = 0; + let iterations = 1; + while (factor > 2 && iterations < 4) { + ctx2.drawImage(can2, distance, 0, w, h, distance+w, 0, w/2, h/2); + distance += w; + factor *= 0.5; + w *= 0.5; + h *= 0.5; + iterations += 1; + } + ctx.drawImage(can2, distance, 0, w, h, this.left, this.top, this.width, this.height); + } + else { + // draw image + ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); + } + // disable shadows for other elements. this.disableShadow(ctx); diff --git a/lib/network/options.js b/lib/network/options.js index 91bb6b16..59c84641 100644 --- a/lib/network/options.js +++ b/lib/network/options.js @@ -221,6 +221,7 @@ let allOptions = { shapeProperties: { borderDashes: { boolean, array }, borderRadius: { number }, + interpolation: { boolean }, useImageSize: { boolean }, useBorderWithImage: { boolean }, __type__: { object } @@ -362,6 +363,7 @@ let configureOptions = { shapeProperties: { borderDashes: false, borderRadius: [6, 0, 20, 1], + interpolation: true, useImageSize: false }, size: [25, 0, 200, 1]