mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-14 04:34:21 +02:00
Make bezier canvases HiDPI-aware. (#47)
* Make bezier canvases HiDPI-aware. * Fix HiDPI bugs and linting issues. * Address review comments.
This commit is contained in:
committed by
Mike Kamermans
parent
3f2b2cc80a
commit
8e8d09e825
@@ -16,6 +16,7 @@ var Graphic = React.createClass({
|
|||||||
|
|
||||||
defaultWidth: 275,
|
defaultWidth: 275,
|
||||||
defaultHeight: 275,
|
defaultHeight: 275,
|
||||||
|
panelCount: 1,
|
||||||
|
|
||||||
Bezier: Bezier,
|
Bezier: Bezier,
|
||||||
utils: Bezier.getUtils(),
|
utils: Bezier.getUtils(),
|
||||||
@@ -53,6 +54,10 @@ var Graphic = React.createClass({
|
|||||||
<figure className={this.props.inline ? "inline": false}>
|
<figure className={this.props.inline ? "inline": false}>
|
||||||
<canvas ref="canvas"
|
<canvas ref="canvas"
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
|
style={{
|
||||||
|
width: this.panelCount * this.defaultWidth + "px",
|
||||||
|
height: this.defaultHeight + "px"
|
||||||
|
}}
|
||||||
onMouseDown={this.mouseDown}
|
onMouseDown={this.mouseDown}
|
||||||
onMouseMove={this.mouseMove}
|
onMouseMove={this.mouseMove}
|
||||||
onMouseUp={this.mouseUp}
|
onMouseUp={this.mouseUp}
|
||||||
@@ -68,11 +73,13 @@ var Graphic = React.createClass({
|
|||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
var cvs = this.refs.canvas;
|
var cvs = this.refs.canvas;
|
||||||
cvs.width = this.defaultWidth;
|
var dpr = this.getPixelRatio();
|
||||||
cvs.height = this.defaultHeight;
|
cvs.width = this.defaultWidth * dpr;
|
||||||
|
cvs.height = this.defaultHeight * dpr;
|
||||||
this.cvs = cvs;
|
this.cvs = cvs;
|
||||||
var ctx = cvs.getContext("2d");
|
var ctx = cvs.getContext("2d");
|
||||||
this.ctx = ctx;
|
this.ctx = ctx;
|
||||||
|
this.ctx.scale(dpr, dpr);
|
||||||
|
|
||||||
if (this.props.paperjs) {
|
if (this.props.paperjs) {
|
||||||
var Paper = this.Paper = require("../lib/vendor/paperjs/paper-core");
|
var Paper = this.Paper = require("../lib/vendor/paperjs/paper-core");
|
||||||
@@ -238,6 +245,8 @@ var Graphic = React.createClass({
|
|||||||
this.ctx.strokeStyle = "black";
|
this.ctx.strokeStyle = "black";
|
||||||
this.ctx.lineWidth = 1;
|
this.ctx.lineWidth = 1;
|
||||||
this.ctx.fillStyle = "none";
|
this.ctx.fillStyle = "none";
|
||||||
|
var dpr = this.getPixelRatio();
|
||||||
|
this.ctx.scale(dpr, dpr);
|
||||||
this.offset = {x:0, y:0};
|
this.offset = {x:0, y:0};
|
||||||
this.colorSeed = 0;
|
this.colorSeed = 0;
|
||||||
},
|
},
|
||||||
@@ -245,8 +254,15 @@ var Graphic = React.createClass({
|
|||||||
setSize: function(w,h) {
|
setSize: function(w,h) {
|
||||||
this.defaultWidth = w;
|
this.defaultWidth = w;
|
||||||
this.defaultHeight = h;
|
this.defaultHeight = h;
|
||||||
this.refs.canvas.width = w;
|
|
||||||
this.refs.canvas.height = h;
|
var cvs = this.refs.canvas;
|
||||||
|
cvs.style.width = this.panelCount * w + "px";
|
||||||
|
cvs.style.height = h + "px";
|
||||||
|
|
||||||
|
var dpr = this.getPixelRatio();
|
||||||
|
cvs.width = this.panelCount * w * dpr;
|
||||||
|
cvs.height = h * dpr;
|
||||||
|
this.ctx.scale(dpr, dpr);
|
||||||
},
|
},
|
||||||
|
|
||||||
setCurves: function(c) {
|
setCurves: function(c) {
|
||||||
@@ -279,16 +295,23 @@ var Graphic = React.createClass({
|
|||||||
return new this.Bezier(120,160,35,200,220,260,220,40);
|
return new this.Bezier(120,160,35,200,220,260,220,40);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getPixelRatio: function () {
|
||||||
|
return window.devicePixelRatio || 1;
|
||||||
|
},
|
||||||
|
|
||||||
toImage: function() {
|
toImage: function() {
|
||||||
var dataURL = this.refs.canvas.toDataURL();
|
var dataURL = this.refs.canvas.toDataURL();
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.src = dataURL;
|
img.src = dataURL;
|
||||||
|
img.devicePixelRatio = this.getPixelRatio();
|
||||||
return img;
|
return img;
|
||||||
},
|
},
|
||||||
|
|
||||||
setPanelCount: function(c) {
|
setPanelCount: function(c) {
|
||||||
|
this.panelCount = c;
|
||||||
var cvs = this.refs.canvas;
|
var cvs = this.refs.canvas;
|
||||||
cvs.width = c * this.defaultWidth;
|
cvs.width = c * this.defaultWidth * this.getPixelRatio();
|
||||||
|
cvs.style.width = c * this.defaultWidth + "px";
|
||||||
},
|
},
|
||||||
|
|
||||||
setOffset: function(f) {
|
setOffset: function(f) {
|
||||||
@@ -602,12 +625,13 @@ var Graphic = React.createClass({
|
|||||||
offset.x += this.offset.x;
|
offset.x += this.offset.x;
|
||||||
offset.y += this.offset.y;
|
offset.y += this.offset.y;
|
||||||
}
|
}
|
||||||
|
var dpr = image.devicePixelRatio || 1;
|
||||||
if (image.loaded) {
|
if (image.loaded) {
|
||||||
this.ctx.drawImage(image,offset.x,offset.y);
|
this.ctx.drawImage(image,offset.x,offset.y, image.width/dpr, image.height/dpr);
|
||||||
} else {
|
} else {
|
||||||
image.onload = () => {
|
image.onload = () => {
|
||||||
image.loaded = true;
|
image.loaded = true;
|
||||||
this.ctx.drawImage(image,offset.x,offset.y);
|
this.ctx.drawImage(image,offset.x,offset.y, image.width/dpr, image.height/dpr);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Reference in New Issue
Block a user