mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-20 22:39:50 -05:00
Implement #importSVG() from external URL.
This commit is contained in:
parent
b8ab0f36f9
commit
056dcceacc
4 changed files with 68 additions and 20 deletions
|
@ -289,20 +289,6 @@ paper.PaperScope.prototype.PaperScript = (function(root) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#*/ if (options.environment == 'browser') {
|
/*#*/ if (options.environment == 'browser') {
|
||||||
// Code borrowed from Coffee Script:
|
|
||||||
function request(url, scope) {
|
|
||||||
var xhr = new (window.ActiveXObject || XMLHttpRequest)(
|
|
||||||
'Microsoft.XMLHTTP');
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
if (xhr.overrideMimeType)
|
|
||||||
xhr.overrideMimeType('text/plain');
|
|
||||||
xhr.onreadystatechange = function() {
|
|
||||||
if (xhr.readyState === 4) {
|
|
||||||
return evaluate(xhr.responseText, scope);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return xhr.send(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
function load() {
|
function load() {
|
||||||
var scripts = document.getElementsByTagName('script');
|
var scripts = document.getElementsByTagName('script');
|
||||||
|
@ -324,11 +310,14 @@ paper.PaperScope.prototype.PaperScript = (function(root) {
|
||||||
// it, to support multiple scripts per canvas. Otherwise
|
// it, to support multiple scripts per canvas. Otherwise
|
||||||
// create a new one.
|
// create a new one.
|
||||||
scope = PaperScope.get(canvas)
|
scope = PaperScope.get(canvas)
|
||||||
|| new PaperScope(script).setup(canvas);
|
|| new PaperScope(script).setup(canvas),
|
||||||
if (script.src) {
|
src = script.src;
|
||||||
// If we're loading from a source, request that first and then
|
if (src) {
|
||||||
// run later.
|
// If we're loading from a source, request that first and
|
||||||
request(script.src, scope);
|
// then run later.
|
||||||
|
Http.request('get', src, function(code) {
|
||||||
|
evaluate(code, scope);
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
// We can simply get the code form the script tag.
|
// We can simply get the code form the script tag.
|
||||||
evaluate(script.innerHTML, scope);
|
evaluate(script.innerHTML, scope);
|
||||||
|
|
34
src/net/Http.js
Normal file
34
src/net/Http.js
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
/*
|
||||||
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
||||||
|
* http://paperjs.org/
|
||||||
|
*
|
||||||
|
* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
|
||||||
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
||||||
|
*
|
||||||
|
* Distributed under the MIT license. See LICENSE file for details.
|
||||||
|
*
|
||||||
|
* All rights reserved.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var Http = {
|
||||||
|
request: function(method, url, callback) {
|
||||||
|
// Code borrowed from Coffee Script and extended:
|
||||||
|
var xhr = new (window.ActiveXObject || XMLHttpRequest)(
|
||||||
|
'Microsoft.XMLHTTP');
|
||||||
|
xhr.open(method.toUpperCase(), url, true);
|
||||||
|
if ('overrideMimeType' in xhr)
|
||||||
|
xhr.overrideMimeType('text/plain');
|
||||||
|
xhr.onreadystatechange = function() {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
var status = xhr.status;
|
||||||
|
if (status === 0 || status === 200) {
|
||||||
|
callback.call(xhr, xhr.responseText);
|
||||||
|
} else {
|
||||||
|
throw new Error('Could not load ' + url + ' (Error '
|
||||||
|
+ status + ')');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return xhr.send(null);
|
||||||
|
}
|
||||||
|
};
|
|
@ -118,6 +118,11 @@ var paper = new function(undefined) {
|
||||||
|
|
||||||
/*#*/ include('tool/ToolEvent.js');
|
/*#*/ include('tool/ToolEvent.js');
|
||||||
/*#*/ include('tool/Tool.js');
|
/*#*/ include('tool/Tool.js');
|
||||||
|
|
||||||
|
// Http is used both for PaperScript and SVGImport
|
||||||
|
/*#*/ if (options.paperscript || options.svg) {
|
||||||
|
/*#*/ include('net/Http.js');
|
||||||
|
/*#*/ } // options.paperscript || options.svg
|
||||||
/*#*/ } // options.environment == 'browser'
|
/*#*/ } // options.environment == 'browser'
|
||||||
|
|
||||||
/*#*/ include('canvas/CanvasProvider.js');
|
/*#*/ include('canvas/CanvasProvider.js');
|
||||||
|
|
|
@ -493,8 +493,26 @@ new function() {
|
||||||
function importSVG(node, isRoot, options) {
|
function importSVG(node, isRoot, options) {
|
||||||
if (!options)
|
if (!options)
|
||||||
options = {};
|
options = {};
|
||||||
if (typeof node === 'string')
|
if (typeof node === 'string') {
|
||||||
|
// Check if the string does not represent SVG data, in which case
|
||||||
|
// it must be a url of a SVG to be loaded.
|
||||||
|
if (isRoot && !/^.*</.test(node)) {
|
||||||
|
if (typeof options === 'function')
|
||||||
|
options = { onLoad: options };
|
||||||
|
// Remember current scope so we can restore it in the callback.
|
||||||
|
var scope = paper;
|
||||||
|
return Http.request('get', node, function(xml) {
|
||||||
|
paper = scope;
|
||||||
|
var item = importSVG(xml, isRoot, options),
|
||||||
|
onLoad = options.onLoad,
|
||||||
|
view = scope.project && scope.project.view;
|
||||||
|
if (onLoad)
|
||||||
|
onLoad.call(this, item);
|
||||||
|
view.draw(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
node = new DOMParser().parseFromString(node, 'image/svg+xml');
|
node = new DOMParser().parseFromString(node, 'image/svg+xml');
|
||||||
|
}
|
||||||
// jsdom in Node.js uses uppercase values for nodeName...
|
// jsdom in Node.js uses uppercase values for nodeName...
|
||||||
var type = node.nodeName.toLowerCase(),
|
var type = node.nodeName.toLowerCase(),
|
||||||
importer = importers[type],
|
importer = importers[type],
|
||||||
|
@ -517,12 +535,14 @@ new function() {
|
||||||
return item;
|
return item;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// NOTE: Documentation is in Item.js
|
||||||
Item.inject({
|
Item.inject({
|
||||||
importSVG: function(node, options) {
|
importSVG: function(node, options) {
|
||||||
return this.addChild(importSVG(node, true, options));
|
return this.addChild(importSVG(node, true, options));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// NOTE: Documentation is in Project.js
|
||||||
Project.inject({
|
Project.inject({
|
||||||
importSVG: function(node, options) {
|
importSVG: function(node, options) {
|
||||||
this.activate();
|
this.activate();
|
||||||
|
|
Loading…
Reference in a new issue