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;
box shape. It allows you to determine the roundness of the corners of the shape.
trueimage and circularImage shapes. When true, the image is resampled when scaled down, resulting in a nicer image at the cost of computional time.
+