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.
true
image
and circularImage
shapes. When true, the image is resampled when scaled down, resulting in a nicer image at the cost of computional time.
+