查看“微件:Imagemaker”的源代码
←
微件:Imagemaker
跳到导航
跳到搜索
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您没有权限编辑
微件
命名空间内的页面。
您可以查看和复制此页面的源代码。
<includeonly><html> <div id="image-maker-container"> <div id="js-tag"> <script src="https://wiki-app.loveliv.es/js/template-native.js"></script> <script src="https://wiki-app.loveliv.es/js/jquery.min.js"></script> <script src="https://wiki-app.loveliv.es/js/cards.js"></script> <script src="https://wiki-app.loveliv.es/js/backgrounds.js"></script> <script> function draw(bg, navi, naviRatio, naviX, naviY, text, textX, textY, textSize, font, fontColor) { var c = document.getElementById("result-canvas"); var cxt = c.getContext('2d'); var bgImg = new Image(); bgImg.src = bg; bgImg.onload = function() { cxt.drawImage(this, 0, 0, this.width, this.height, 0, 0, c.width, c.height); var naviImg = new Image(); naviImg.src = navi; naviImg.onload = function() { //-200,600 console.log(c.height*(1.0-naviRatio)*naviY); cxt.drawImage(this, 0, 0, this.width, this.height, -200+800*naviX, c.height*(1.0-naviRatio)+c.height*(1-naviY), c.height*naviRatio*this.width/this.height, c.height*naviRatio); cxt.font = String(textSize) + "px " + font; cxt.fillStyle = fontColor; cxt.fillText(text, c.width * textX, c.height * textY); } $('.update').attr("disabled", false); } $('.update').attr("disabled", true); } function update() { var bg = $("#background").val(); var navi = ""; var card = cards.filter(function(item) { return item.id == $("#navi").val(); })[0]; var up = $("input[type='radio'][name='state']:checked").val(); if(up != 'up') { navi = card.navi; } else navi = card.upnavi; navi = navi.replace('cards', 'navis'); for (var i = 1; i <= 5; i++) draw(bg , navi , parseFloat($('#navi-radio').val()) , parseFloat($('#navi-range-x').val()) , parseFloat($('#navi-range-y').val()) , $('#text').val() , parseFloat($('#text-range-x').val()) , parseFloat($('#text-range-y').val()) , parseInt($('#text-radio').val()) , $('#font').val() , $('#font-color').val() ); } </script> </div> <style type="text/css"> #result-div { width:640; height:400; margin: auto auto; text-align: center; vertical-align: middle; } #result-canvas { width:80%; height:80%; margin: auto auto; } #select-div { width: 80%; border: 1px solid black; margin: 1% auto; border-radius: 15px; padding: 1% 1%; } .background-input { -webkit-appearance:none; border-radius: 5px; width: 150px; height: 80px; } .navi-input { -webkit-appearance:none; border-radius: 5px; width: 80px; height: 80px; background-repeat: no-repeat; background-size: cover; } #select-bar input:checked { -webkit-appearance:none; border-radius: 5px; border: 2px solid #3498db; } </style> </head> <body> <div id="result-div"> <canvas id="result-canvas" width="1280" height="800"> </canvas> </div> <div id="select-div"> <script id="select-template" type="text/template"> 背景: <select id="background" name="background" class="update"> <%for(var id in backgrounds){%> <option value="<%=backgrounds[id].src%>"><%=backgrounds[id].name%></option> <%}%> </select> 角色: <select id="navi" name="navi" class="update"> <%for(var id in cards){%> <option value="<%=cards[id].id%>">【<%=cards[id].id%>】 <%=cards[id].name%> <%if(cards[id].series.length){%><%=cards[id].series[0]%><%}%></option> <%}%> </select> <div>字体: <select id="font" name="font" class="update"> <%for(var i = 0; i < fonts.length; i++){%> <option value="<%=fonts[i]%>"><%=fonts[i]%></option> <%}%> </select> 字体颜色:<input class="update" type="color" name="font-color" id="font-color"> <br> 文字:<input class="update" id="text" value="ID:樱阪雫"> 文本大小 - R:<input class="update" id="text-radio" type="range" min="20" max="200" step="1" value="100"><br/> <br> <input class="update" type="radio" name="state" value="normal">未觉醒 <input class="update" type="radio" name="state" value="up" checked="true">觉醒 <div> 角色位置 - X:<input class="update" id="navi-range-x" type="range" min="0" max="1" step="0.01" value="0.9"><br/> 角色位置 - Y:<input class="update" id="navi-range-y" type="range" min="0.1" max="1.2" step="0.01" value="1.0"><br/> 角色大小 - R:<input class="update" id="navi-radio" type="range" min="0" max="2" step="0.01" value="1.0"><br/> 文本位置 - X:<input class="update" id="text-range-x" type="range" min="0" max="1" step="0.01" value="0.1"><br/> 文本位置 - Y:<input class="update" id="text-range-y" type="range" min="0" max="1" step="0.01" value="0.5"><br/> </script> </div> <script> $(document).ready(function() { console.log(cards); var fonts = ["SimHei","SimSun","NSimSun","FangSong","KaiTi","FangSong_GB2312 ","KaiTi_GB2312","Microsoft YaHei"]; $("#select-div").html(template('select-template', {backgrounds : backgrounds, cards : cards.sort(function(a, b){return a.id-b.id;}), fonts : ["SimHei","SimSun","NSimSun","FangSong","KaiTi","FangSong_GB2312 ","KaiTi_GB2312","Microsoft YaHei"]})); $('.update').change(update); update(); }); </script> </div> </html></includeonly> <noinclude> 用于[[Imagemaker]] </noinclude> <!--分类--> [[分类:小应用程序]]
返回
微件:Imagemaker
。
导航菜单
个人工具
创建账号
登录
命名空间
微件
讨论
大陆简体
查看
阅读
查看源代码
查看历史
更多
搜索
导航
首页
SIF2 实用工具
卡片数据和能力排行
自动组队和效率曲计算器
歌曲数据和谱面可视化(尚未开工)
游戏机制和数据
游戏机制
历次活动信息和分数线
剧情列表和内容(尚未开工)
聊天列表和内容(尚未开工)
常用数据和表格
工具
链入页面
相关更改
特殊页面
页面信息